SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamically adding caption text to image gallery with zoom

    I am trying to create a small gallery of images with a zoom effect - I have managed this with a plugin called ElevateZoom. The zoom functionality works well, the images swap when clicking on a thumbnail, but now I'd like to also add a caption to each image. So, the caption needs to also be attached to the function of the image swap. My javascript skills are minimal at best. I understand that I need to pass another parameter into the script, but it seems like I can't attach both the zoom function (and thus the larger hidden image) plus the caption to one a href. Can someone help?

    Here is a link to the work in progress: http://coastalcreations.net/new/gallery.html

    Also, I am aware that it doesn't validate because there is an ID used more than once on the page, but that was the way the ElevateZoom instructed. Not sure if it will still work if I remove all the extra ids that are on each image.

    Thanks for your help!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset='utf-8'/>
    	<meta name="keywords" content="Coastal Creations, seashell mirrors, creative shell mirrors" />
    <meta name="description" content="Hand-crafted works of art brought to you from the coast of Maine"/>
    <meta name="ROBOTS" content="index,follow,revisit 15 days"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://coastalcreations.net/new/"  />
    <title>Coastal Creations :: Gallery</title>
    <link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css'>
    
    <link href="css/coastalcreations-styles.css" rel="stylesheet" type="text/css" />
    <link href="css/portfolio-styles.css"  rel="stylesheet" type="text/css"/>
    
    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
       	<script src='js/jquery-1.8.3.min.js'></script>
    	<script src='js/jquery.elevatezoom.js'></script>
    
    
    </head>
    <body>
    <div id="wrapper">
    <header>
      <a id="homelink" href="index.html"></a>
    
      <h1>Coastal Creations</h1>
    <div id="mirrors">
    <img src="assets/mirror-collage.png" height="199" width="173" alt="Mirror Collage"/>
    </div>
      <nav>
      <ul>
      <li><a href="index.html">Home</a></li>
      <li>Gallery</li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
      </nav>
    </header>
    
    <section>
    <h2>Our Mirrors</h2>
    <p>Hover your mouse over the larger image to zoom in and see the details. Click on any of the thumbnails below to see the full image</p>
    
    <div id="image"><img  class="fancybox"  id="zoom_01" src='gallery-test/images/small/2_EbbTide_Square_19x19.png' data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" alt="mirror"/></div><!-- end image div -->
    
    <div id="captions" style="position:relative;height:20px;background-Color:#FFCC66;text-Align:center;" >
     <div >Caption 1</div>
     <div >Caption 2</div>
     <div >Caption 3</div>
     <div >Caption 4</div>
     <div >Caption 5</div>
     <div >Caption 6</div>
     <div >Caption 7</div>
     <div >Caption 8</div>
    </div>
    <br/>
    <div id="gallery_01">
     	<a href="#" data-image="gallery-test/images/small/2_EbbTide_Square_19x19.png" data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" >
        <img class="fancybox" src="gallery-test/images/thumb/2_EbbTide_Square_19x19.jpg" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/1_Captiva_SpanishArch_26x41.jpg" data-zoom-image="gallery-test/images/large/1_Captiva_SpanishArch_26x41.jpg" title="Captiva Spanish Arch" content="26&quot; x 41&quot;" >
        <img class="fancybox"  src="gallery-test/images/thumb/1_Captiva_SpanishArch_26x41.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/3_Dunes_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/3_Dunes_LargeBidirectional_33x45.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/3_Dunes_LargeBidirectional_33x45.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg" data-zoom-image="gallery-test/images/large/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/5_Atlantis_BorderWCrest_30.5x44.jpg" data-zoom-image="gallery-test/images/large/5_Atlantis_BorderWCrest_30.5x44.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/5_Atlantis_BorderWCrest_30.5x44.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/6_Windward_NarrowFrame_20.5x25.5.jpg" data-zoom-image="gallery-test/images/large/6_Windward_NarrowFrame_20.5x25.5.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/6_Windward_NarrowFrame_20.5x25.5.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/7_Neptune_Octagonal_30x30.jpg" data-zoom-image="gallery-test/images/large/7_Neptune_Octagonal_30x30.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/7_Neptune_Octagonal_30x30.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/8_Sanibel_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/8_Sanibel_LargeBidirectional_33x45.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/8_Sanibel_LargeBidirectional_33x45.jpg"  alt="mirror" />
      </a>
    
    </div><!-- close gallery_01-->
    </section>
    </div><!-- close wrapper -->
    <footer>
    <p class="contact"><a href="mailto:dstair@coastalcreations.net">dstair[at]coastalcreations[dot]net</a></p>
    <p><!-- Generated by www.webweaver.nu -->
    <script type="text/javascript">
    /*<![CDATA[*/
    var zxcCaptions={
    
     init:function(o){
      var cp=document.getElementById(o.CaptionsID),gp=document.getElementById(o.GalleryID),n=o.DisplayIndex,n=typeof(n)=='number'?n:0;
      if (cp&&gp){
       var clds=cp.childNodes,ca=[],imgs=gp.getElementsByTagName('IMG'),z0=0,z1=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         clds[z0].style.position='absolute';
         clds[z0].style.visibility=ca.length!=n?'hidden':'visible';
         ca.push(clds[z0]);
        }
       }
       for (;z1<imgs.length;z1++){
        if (ca[z1]){
         this.addevt(imgs[z1],'click','caption',o,z1);
        }
       }
       o.n=n;
       o.ca=ca;
      }
     },
    
     caption:function(o,n){
      o.ca[o.n]?o.ca[o.n].style.visibility='hidden':null;
      o.ca[n]?o.ca[n].style.visibility='visible':null;
      o.n=n;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcCaptions.init({
     CaptionsID:'captions',
     GalleryID:'gallery_01',
     DisplayIndex:0
    });
    /*]]>*/
    </script><script>
    <!--
    document.write('&copy; ' );
    document.write(new Date().getFullYear());
    document.write('  CoastalCreations.net - All Rights Reserved.');
    //-->
    </script>
    </p>
    </footer><!--close footer-->
    
    
    <script>
    
    	$("#zoom_01").elevateZoom({
    			gallery:'gallery_01',
    			cursor: 'pointer',
    			galleryActiveClass: 'active',
    			imageCrossfade: true,
    			zoomType: "inner",
    			zoomWindowFadeIn: 500,
    			zoomWindowFadeOut: 750
    			//loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
    							  });
    
    	$("#zoom_01").bind("click", function(e) {
      var ez =   $('#zoom_01').data('elevateZoom');
    	$.fancybox(ez.getGalleryList());
      return false;
    });
    
    </script>
    
    <!--<script type="text/javascript">
    
    $(function() {
    $(".image").click(function() {
    var image = $(this).attr("rel");
    var title = $(this).attr("title");
    var description = $(this).attr("content");
    $('#gallery').hide();
    $('#gallery').fadeIn('slow');
    $('#image').html('<img src="' + image + '"/>');
    $('#title').html(title);
    $('#description').html(description);
    return false;
    	});
    });
    </script>-->
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks so much. It works beautifully. I really appreciate the help.

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset='utf-8'/>
    	<meta name="keywords" content="Coastal Creations, seashell mirrors, creative shell mirrors" />
    <meta name="description" content="Hand-crafted works of art brought to you from the coast of Maine"/>
    <meta name="ROBOTS" content="index,follow,revisit 15 days"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://coastalcreations.net/new/"  />
    <title>Coastal Creations :: Gallery</title>
    <link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css'>
    
    <link href="css/coastalcreations-styles.css" rel="stylesheet" type="text/css" />
    <link href="css/portfolio-styles.css"  rel="stylesheet" type="text/css"/>
    
    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
       	<script src='js/jquery-1.8.3.min.js'></script>
    	<script src='js/jquery.elevatezoom.js'></script>
    
    
    </head>
    <body>
    <div id="wrapper">
    <header>
      <a id="homelink" href="index.html"></a>
    
      <h1>Coastal Creations</h1>
    <div id="mirrors">
    <img src="assets/mirror-collage.png" height="199" width="173" alt="Mirror Collage"/>
    </div>
      <nav>
      <ul>
      <li><a href="index.html">Home</a></li>
      <li>Gallery</li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
      </nav>
    </header>
    
    <section>
    <h2>Our Mirrors</h2>
    <p>Hover your mouse over the larger image to zoom in and see the details. Click on any of the thumbnails below to see the full image</p>
    
    <div id="image"><img  class="fancybox"  id="zoom_01" src='gallery-test/images/small/2_EbbTide_Square_19x19.png' data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" alt="mirror"/></div><!-- end image div -->
    
    <div id="captions" style="position:relative;height:20px;background-Color:#FFCC66;text-Align:center;" >
     <div >Caption 1</div>
     <div >Caption 2</div>
     <div >Caption 3</div>
     <div >Caption 4</div>
     <div >Caption 5</div>
     <div >Caption 6</div>
     <div >Caption 7</div>
     <div >Caption 8</div>
    </div>
    <br/>
    <div id="gallery_01">
     	<a href="#" data-image="gallery-test/images/small/2_EbbTide_Square_19x19.png" data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" >
        <img class="fancybox" src="gallery-test/images/thumb/2_EbbTide_Square_19x19.jpg" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/1_Captiva_SpanishArch_26x41.jpg" data-zoom-image="gallery-test/images/large/1_Captiva_SpanishArch_26x41.jpg" title="Captiva Spanish Arch" content="26&quot; x 41&quot;" >
        <img class="fancybox"  src="gallery-test/images/thumb/1_Captiva_SpanishArch_26x41.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/3_Dunes_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/3_Dunes_LargeBidirectional_33x45.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/3_Dunes_LargeBidirectional_33x45.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg" data-zoom-image="gallery-test/images/large/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg"  alt="mirror" />
      </a>
    
      <a href="#" data-image="gallery-test/images/small/5_Atlantis_BorderWCrest_30.5x44.jpg" data-zoom-image="gallery-test/images/large/5_Atlantis_BorderWCrest_30.5x44.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/5_Atlantis_BorderWCrest_30.5x44.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/6_Windward_NarrowFrame_20.5x25.5.jpg" data-zoom-image="gallery-test/images/large/6_Windward_NarrowFrame_20.5x25.5.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/6_Windward_NarrowFrame_20.5x25.5.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/7_Neptune_Octagonal_30x30.jpg" data-zoom-image="gallery-test/images/large/7_Neptune_Octagonal_30x30.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/7_Neptune_Octagonal_30x30.jpg"  alt="mirror" />
      </a>
    
       <a href="#" data-image="gallery-test/images/small/8_Sanibel_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/8_Sanibel_LargeBidirectional_33x45.jpg">
        <img class="fancybox" src="gallery-test/images/thumb/8_Sanibel_LargeBidirectional_33x45.jpg"  alt="mirror" />
      </a>
    
    </div><!-- close gallery_01-->
    </section>
    </div><!-- close wrapper -->
    <footer>
    <p class="contact"><a href="mailto:dstair@coastalcreations.net">dstair[at]coastalcreations[dot]net</a></p>
    <p><!-- Generated by www.webweaver.nu -->
    <script type="text/javascript">
    /*<![CDATA[*/
    var zxcCaptions={
    
     init:function(o){
      var cp=document.getElementById(o.CaptionsID),gp=document.getElementById(o.GalleryID),n=o.DisplayIndex,n=typeof(n)=='number'?n:0;
      if (cp&&gp){
       var clds=cp.childNodes,ca=[],imgs=gp.getElementsByTagName('IMG'),z0=0,z1=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         clds[z0].style.position='absolute';
         clds[z0].style.visibility=ca.length!=n?'hidden':'visible';
         ca.push(clds[z0]);
        }
       }
       for (;z1<imgs.length;z1++){
        if (ca[z1]){
         this.addevt(imgs[z1],'click','caption',o,z1);
        }
       }
       o.n=n;
       o.ca=ca;
      }
     },
    
     caption:function(o,n){
      o.ca[o.n]?o.ca[o.n].style.visibility='hidden':null;
      o.ca[n]?o.ca[n].style.visibility='visible':null;
      o.n=n;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcCaptions.init({
     CaptionsID:'captions',
     GalleryID:'gallery_01',
     DisplayIndex:0
    });
    /*]]>*/
    </script><script>
    <!--
    document.write('&copy; ' );
    document.write(new Date().getFullYear());
    document.write('  CoastalCreations.net - All Rights Reserved.');
    //-->
    </script>
    </p>
    </footer><!--close footer-->
    
    
    <script>
    
    	$("#zoom_01").elevateZoom({
    			gallery:'gallery_01',
    			cursor: 'pointer',
    			galleryActiveClass: 'active',
    			imageCrossfade: true,
    			zoomType: "inner",
    			zoomWindowFadeIn: 500,
    			zoomWindowFadeOut: 750
    			//loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
    							  });
    
    	$("#zoom_01").bind("click", function(e) {
      var ez =   $('#zoom_01').data('elevateZoom');
    	$.fancybox(ez.getGalleryList());
      return false;
    });
    
    </script>
    
    <!--<script type="text/javascript">
    
    $(function() {
    $(".image").click(function() {
    var image = $(this).attr("rel");
    var title = $(this).attr("title");
    var description = $(this).attr("content");
    $('#gallery').hide();
    $('#gallery').fadeIn('slow');
    $('#image').html('<img src="' + image + '"/>');
    $('#title').html(title);
    $('#description').html(description);
    return false;
    	});
    });
    </script>-->
    
    </body>
    </html>


Bookmarks

Posting Permissions

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