Results 1 to 2 of 2

Thread: Newbie needing clickable captions in a scroller image

Hybrid View

  1. #1
    Join Date
    Apr 2013

    Newbie needing clickable captions in a scroller image

    I am trying to make clickable links in a image box of a scroller. I tried changing the #captions p to #captions a in the change image section but no luck. Help please.

    <div id="image_wrap" style="margin:0;padding:0">
    <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
    <div id="caption_wrap">
    <div id="image_caption">
    <p id="caption_text"></p>
    <img src="contentImages/monstersU/17312c-th.jpg" width="400" height="400" style="border:1px solid #0066cc;"/>
    <div id="captions">
    <a href="http://www.decopac.com/detail_17312M__1-1-464.html"><p> Monsters Univ Students Mike & Sulley Decoset: #17312<br></p> </a>
    <a href="http://www.decopac.com/detail_17367__89.html"><p>Monsters University Cupcake Platter: #17367<br></p></a>

    jQuery(function() {
    var thumbindex = 0;

    jQuery(".items img").click(function() {
    thumbindex = jQuery(".items img").index(this);
    // see if same thumb is being clicked
    if (jQuery(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL
    var url = jQuery(this).attr("src").replace("-th", "");
    //var imageID = jQuery(this).attr("rel");
    // get handle to element that wraps the image and make it semi-transparent
    //var wrap = jQuery("#image_wrap").fadeTo("medium", 0.5);
    var wrap = jQuery('#image_wrap').fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();

    // call this function after it's loaded
    img.onload = function() {

    // make wrapper fully visible
    wrap.fadeTo("fast", 1);

    // change the image
    wrap.find("img").attr("src", url);
    var captiontext = jQuery("#captions a").eq(thumbindex).html();//grab the caption related to the thumbnail clicked
    if (captiontext != ""){//if there is a caption
    jQuery("#image_caption").empty().append(captiontext).stop().fadeTo(500, 0.7);//remove the previous caption and show the current one fading in to 70% opacity


    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");


    // when page loads simulate a "click" on the first image

    mask: '#789'


    <div class="clearIt"><!-- --></div>



    <div id="footer">

    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
    _uacct = "UA-5898148-1";

  2. #2
    Join Date
    Apr 2013
    figured it out

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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