Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Linked fullsize image not showing up in preview area

    Hi,
    I am working in Dreamweaver CS4 with both HTML and Javascript.
    I created a preview area and some thumbnails beneath. Each thumbnail is linked to a full size image. So far, so good.
    I'm attempting to follow a Javascript tutorial to make a lightbox.
    I added CSS rules and the javascript code (below) in the hopes of having my thumbnail show the image in the clickable preview area when hovering. However, my fullsize image does not display in the preview area. Interestingly, when I hover over the preview, I see at the bottom of my browser that it is still linked, just not displaying. The preview area is blank. Any ideas?
    I've put the site online artmarcsimon dot com
    Thanks!
    Javascript:
    Code:
    $(document).ready(function(){
    
    $('.gallery_thumbnails a').click(function(e){
    
    e.preventDefault();
    
    $('.gallery_thumbnails a').removeClass('selected');
    $('.gallery_thumbnails a').children().css('opacity','1');
    
    $(this).addClass('selected');
    
    var photo_caption = $(this).attr('title');     
    var photo_fullsize = $(this).attr('href');
    var photo_preview = photo_fullsize.replace('_fullsize','_preview');
    
    $('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
    });                                                  
    });

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You bind the click handler to all the anchor (<a>) elements inside your element(s) with class "gallery_thumbnails"

    Inside the click handler you toggle the class "selected", set the opacity of all children of those anchors to "fully opaque" (?) and then you change the html of all the element(s) with class "gallery_thumbnails" to a new anchor element which links to the fullsize_image and displays the thumbnail as a backgroud image.

    There is no code which whould actually SHOW the fullsize image anywhere.

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,
    I was following a tutorial and modifying it to meet my needs. In the tutorial, they did an opacity change which I did not want, so I set it to fully opaque. Can I delete the line
    Code:
     $('.gallery_thumbnails a').children().css('opacity','1');
    I want to show the fullsize image... how would I do so?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •