- jQuery on image click reveal text desc in div
- <!-- Swap portfolio image on click -->
- $("ul.thumbs li a").click(function() {
- var mainImage = $(this).attr("href"); //Find Image Name
- $(".work_two_third_column_copy img").attr({ src: mainImage });
- return false;
- });
- <!-- Get image description on click -->
- $("ul.thumbs li a").click(function () {
- var tip = $(this).css("visibility:visible");
- $(".one_sixth_column_copy .work_info").html("");
- });
- <div class="work_two_third_column_copy">
- <a href=""><img src="main_image1.gif"></a>
- </div><!-- End .work_two_third_column_copy -->
- <div class="one_third_column_right">
- <div class="one_sixth_column">
- <div class="one_sixth_column_copy">
- <div class="work_info"> </div><!-- End Image Information -->
- </div><!-- End .one_sixth_column_copy -->
- </div><!-- End .one_sixth_column -->
- <div class="one_sixth_column_thumbs">
- <ul class="thumbs">
- <li><a href="main_image1.gif"><img src="1.gif"><span class="tip">number one desc</span></a></li>
- <li><a href="main_image2.gif"><img src="2.gif"><span class="tip">number two desc</span></a></li>
- <li><a href="main_image3.gif"><img src="4.gif"><span class="tip">number three desc</span></a></li>
- <li><a href="main_image4.gif"><img src="5.gif"><span class="tip">number four desc</span></a></li>
- </ul><!-- ul.thumbs -->
- </div><!-- End .one_sixth_column_thumbs -->
- </div><!--End .one_third_column_right -->
- <!-- Swap portfolio information on click -->
- $(function() {
- $("ul.thumbs li a").click(function() {
- $(".work_info p").text($(this).next().text());
- return false;
- });
- });
- <li><a href="main_image1.gif"><img src="1.gif"></a><p>number one text</p></li>
- <li><a href="main_image2.gif"><img src="2.gif"></a><p>number two text</p></li>
- $("ul.thumbs li a").click(function() {
- var mainImage = $(this).attr("href"); //Find Image Name
- //Set image:
- $(".work_two_third_column_copy img").attr({ src: mainImage });
- //Find description:
- var oDescSpan = $(this).find(".tip");
- if (oDescSpan.length == 1)
- $(".one_sixth_column_copy .work_info").html(oDescSpan.html());
- else
- $(".one_sixth_column_copy .work_info").html("");
- return false;
- });
- var clickerSetup = function() {
- $("ul.thumbs li a").click(function() {
- var mainImage = $(this).attr("href"); //Find Image Name
- $(".work_two_third_column_copy img").attr({ src: mainImage });
- var tip = $(this).css("visibility:visible");
- $(".one_sixth_column_copy .work_info").html($(this).text());
- return false
- });
- };
- $(document).ready(function() {
- clickerSetup();
- });
- <!-- Swap portfolio image and desc on click -->
- $("ul.thumbs li a").click(function() {
- var mainImage = $(this).attr("href"); //Find Image Name
- $(".work_two_third_column_copy img").attr({ src: mainImage });
- $(".work_info p").text($(this).next().text());
- return false;
- });