Change content of two divs when image click
I would like guidance on using jQuery to change the content of two divs, one has an image and the other has text, with the click of a thumbnail in a carousel. Is there a more elegant way to do this?
How can I use a REL tag in the IMG tag to handle the big image?
<html><head>
<script type="text/javascript" src="jcarousel/js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="jMyCarousel.css" />
<script type="text/javascript" src="jMyCarousel.js"></script>
<script>
$(document).ready(function() {
$(".jMyCarousel").jMyCarousel({ visible: '100%' });
$("li#one").click(function() {
$("#changeText").html("<img src='img/12.jpg'>");
$("#textBox").html("One has been clicked!");
});
});
</script>
</head><body id="#lab-project">
<div id="changeText"></div>
<br />
<div id="textBox">This text will be changed to something else</div>
<div class="jMyCarousel">
<ul>
<li id="one"><img src="img/1.jpg" width="200" height="150"></li>
开发者_开发技巧 <li><a href="img/2.jpg" title=""><img src="img/2.jpg" width="200" height="150"></a></li>
<li><a href="img/3.jpg" title=""><img src="img/3.jpg" width="200" height="150"></a></li>
<li><a href="img/4.jpg" title=""><img src="img/4.jpg" width="200" height="150"></a></li>
<li><a href="img/11.jpg" title=""><img src="img/11.jpg" width="200" height="150"></a></li>
<li><a href="img/11.jpg" title="" >hello world</a></li>
</ul>
</div>
</body></html>
I believe you want your Carousel extended with a bigger view when a visitor clicks a certain item right? Something like this should fit your need, might need some tweaking though:
$('.jMyCarousel li').click(function(){
$('#changetext, #textBox').empty();
$(this).children('img').appendTo('#changeText');
$(this).children('a').text().appendTo('#textBox');
});
With the use of $(this) you can scope to the clicked element, thus making a more generic piece of code. You can also insert the content of attributes if that is what you need. I would suggest using the alt-attribute for images for the extra text.
加载中,请稍侯......
精彩评论