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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Making an image caption viewer with jQuery.

    I made a simple image gallery with 6 images (to display on the homepage) with jQuery. Thumbs on right and preview image on the center.

    My purpose was that when we click on this thumbs it will change the src of the preview image to load the large version of the thumb.

    These all things made nicely but the problem arise when i want want to make a simple caption viewer for the preview image.

    caption viewer means a simple div (simple box) that is displayed above the image with a caption for the image. It comes above the large image and so opacity of div is also changed.

    caption viewer is displayed when we click the thumbs. It is displayed by displaying the title attribute of the thumb image to that caption viewer div.

    Now when we click on the thumb the preview image is loaded and also the caption viewer is displayed like this.



    the javascript used is
    Code:
    $(document).ready(function() {
    
    var $captionbox = $('<div></div>')
          .appendTo('body')
          .html('<span>'+$('#mg_large').attr('title')+'</span>')
          .attr('id','captionbox')
          .css('top',($('#headpic').offset().top + $('#mg_large').innerHeight() - $('#captionbox').innerHeight() + 10))
          .css('left',$('#headpic').offset().left + 2)
          .css('width',$('#headpic').outerWidth() - 4)
          .css('opacity', 0.8);
      $('#captionbox span').css('opacity', 1);
    
     $('#mg_thumbs img').click(function() {
        var alt_img = $(this).attr('alt');
        var title_img = $(this).attr('title');
        $('#mg_large').attr('title',title_img);
        $('#mg_large').fadeOut('slow',function(){$('#mg_large').attr('src','images/mini_gallery/large/'+alt_img+'.jpg')});
        $('#mg_large').fadeIn('slow');
        
        $captionbox.fadeOut('normal',function(){$captionbox.html('<span>'+$('#headpic img').attr('title')+'</span>');$captionbox.fadeIn('normal')});
    
    });
    the css for caption box
    Code:
    #captionbox {
        position: absolute;
        background-color: #360;
        padding: 10px 0 10px 0;
        z-index: 2;
        text-indent: 10px;
    }
    #captionbox span {
        font-family: Arial, Helvetica, sans-serif;
        color: #CF6;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: bold;
    }
    with these caption viewer is also ready it displayed at the bottom of the preview image with the width of the image.

    the problem arise when i resized my browser window. The caption viewer div changes its position and it comes to exact position only after reloading.

    Can anybody fix this problem ?
    I want to fix the position on the caption viewer right above the image and also want to be it in exact position as in th above screenshot.
    Attached Thumbnails Attached Thumbnails Making an image caption viewer with jQuery.-screenshot.gif  
    Last edited by suhaibkhan; 05-15-2009 at 08:53 PM.


 

Tags for this Thread

Posting Permissions

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