Skip navigation
Currently Being Moderated

add url link in "lightbox style" js gallery

Jun 12, 2012 4:06 PM

Hello,

Can someone help me add a url link in the image description? I am using an "overlay" gallery (prettyphoto) and want viewers to be able to visit a site instead of going to the next image when clicked on images that are websites.

 

CSS Code I am using:

 

<li><a href="images/work/work-full1.jpg" rel="prettyPhoto[1]" title="Trade Show Panels - 2011"><img src="images/work/work-thumb1.jpg"></a></li>

 

<li><a href="images/work/work-full2.jpg" rel="prettyPhoto[1]" title="Local Resource Website - Lake Wylie, SC"><img src="images/work/work-thumb2.jpg"></a></li>

 

and so on...

 

View gallery in action here:

 

click on the work tab.

 

http://doubleulabs.com/

 

Thanks for any help on this.

 
Replies
  • Currently Being Moderated
    Jun 14, 2012 3:33 PM   in reply to kineticcreative123

    Hey there,

     

      So to be clear: Do you want to be able to have the link in the caption area to be clickable and then have it take the user to the link, or do you want the user to click on an image, and then click the right arrow and instead of jumping to the next image go to the site first?

     

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2012 4:56 PM   in reply to kineticcreative123

    No problem! Okay, let's try this for the link in the caption area:

     

    In order to link the text in the caption area, you need to convert the double quotes and greater than or less than signs in your link to their HTML entities (this is because the href link you are currently using would get confused by the regular "<"s being used, so in order to keep them separated for the code to be read correctly, we convert them to their entitity.).

     

    So for instance your first link would look like:

     

    <li>

         <a href="images/work/work-full1.jpg" rel="prettyPhoto[1]" title="&lt;a href=&quot;yourLink.html&quot;&gt;Trade Show Panels - 2011&lt;/a&gt;"><img src="images/work/work-thumb1.jpg" /></a>

    </li>

     

    Where &gt; = > and &lt; = <

    Where &quot; = "

     

    Let me know if that helps!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2012 9:41 AM   in reply to kineticcreative123

    Try this:

     

    2011 target="_blank"&lt;/a&gt;">

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 10:29 PM   in reply to kineticcreative123

    Hi there,

     

    Looks like what you've got is close. Try this:

     

    <li><a href="images/work/work-full3.jpg" rel="prettyPhoto[1]" title=&quot;&lt;a href=&quot;http://doubleulabs.com/P21/index.html&quot; target=&quot;_blank&quot;&gt;Web Link&lt;/a&gt;&quot;&gt;<img src="images/work/work-thumb3.jpg" /></a>

    </li>  

     

    That should open the link in a new window. Let me know if it works for you! : )

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2012 9:23 AM   in reply to kineticcreative123

    I apologize, I converted the quotes and greater than sign in your pretty photo link also. This should work:

     

    <li><a href="images/work/work-full3.jpg" rel="prettyPhoto[1]" title="&lt;a href=&quot;http://doubleulabs.com/P21/index.html"  target=&quot;_blank&quot; &gt;Web Link&lt;/a&gt;"><img src="images/work/work-thumb3.jpg" /></a>

    </li> 

     

    If that code doesn't work for you, is there anyway you could post a download link to a .zip file with your source files? It might be easier for me to troubleshoot this for you if I have the sources to test. : )

     

    Thanks!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2012 9:26 AM   in reply to kineticcreative123

    <li><a href="images/work/work-full3.jpg" rel="prettyPhoto[1]" title="&lt;a href=&quot;http://doubleulabs.com/P21/index.html">Web Link"target="_blank"><img src="images/work/work-thumb3.jpg" /></a>

    </li> 

     

     

     

     

    I also wanted to add^ The reason why this line didn't work is because the target="_blank" wasn't converted to it's entity and it was also placed inside the area where the text is. In order for it to work, target="_blank" should always go inside the beginning of the href (<a href="..." target=_"blank">) Just thought I would point that out for your future reference. : )

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 9:14 AM   in reply to kineticcreative123

    Hi there,

     

    No worries. It's a confusing line of code to wrap someone's brain around. : )

     

    I have gotten it to work for me using this code:

     

    <li><a href="images/work/work-full5.jpg" rel="prettyPhoto[1]" title="&lt;a href=&quot;http://doubleulabs.com/rodden/index.html&quot; target=&quot;_blank&quot;&gt;Click Me&lt;/a&gt;"><img src="images/work/work-thumb5.jpg"></a></li>

     

      Access my source files here: www.jawdroppingdesign.com/HTML_new.zip

     

      What browser are you viewing this in? I tested in Firefox, Chrome, and Safari on Mac OSX Lion...

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 12:53 PM   in reply to kineticcreative123

    Hi kinetic,

     

    I am wondering how you finally fixed the problem.  I am running into the very same issue you were troubleshooting here.  I have tried all the suggestions from dhosford but still haven't solved it.  I see that you worked it out and have tried to view source & figure out what I'm doing wrong but... can't seem to get it.

     

    Here is what I have right now: 

     

    <a href="img/success/lg_dani_in_paper.jpg" rel="lightbox [gallery1]" title="&lt;a href=&quot;http://www.charlotteobserver.com/2012/07/06/3359375/new-graduate-is-be autiful-and.html">Web Link"target="_blank"><img src="img/success/sm_dani_in_paper.jpg" alt="Dani recently graduated from High School and was even asked to lead her class in the pledge of allegiance."></a>

     

    Did you have to modify the javascript?

     

    Thanks!

    Amanda

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 1:04 PM   in reply to Amanda Baucom

    Hi Amanda,

     

    Do you have this link live somewhere that I can see it in action? Also, the space between "be" and "autiful" in your link may be causing some problems. Also, the end quote and end chevron need to be converted to their entities, and you also need to close your link with </a> converted to entities after 'Web Link' before your target tag.

     

    I hope this helps.

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 2:14 PM   in reply to dhosford

    http://amandabaucom-portfolio.com/ddr/ddr_new_phpmod_archived/index.ph p?section=success

     

    I am building at the site above.  I have messed with it a bit since I asked the question trying to figure it out... no success yet.  I also am using lightbox2.0 instead of prettyPhoto, but in looking at prettyPhoto I may be interested in changing over to it.  I cloned the site to install prettyPhoto and test it out, but am running into some issues there too.  Might be time to call it a day and try again tomorrow.

     

    Thanks for the quick response!

     

    Amanda

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 2:17 PM   in reply to Amanda Baucom

    Amanda,

     

      As a personal preference I like to use shadowbox: http://www.shadowbox-js.com/ --Just a suggestion. : )

     

      I think you're right in taking a break, sometimes that does worlds of difference when trying to solve a problem. I will keep working on this to identify your specific solution and will post it here if I find anything.  : )

     

    Thank you!

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 9:36 AM   in reply to Amanda Baucom

    Hi Amanda,

     

      I'm still working on this for you and got the link to open just fine in Shadowbox. Have you tried modifying the js like kineticcreative123 suggested? I have a feeling there might be something wrong there. I'm still looking for a solution for lightbox specifically though.

     

    This is the code I used to make it work:

     

    "&lt;a href=&quot;http://www.charlotteobserver.com/2012/07/06/3359375/new-graduate-is-be autiful-and.html" target=&quot;_blank&quot;&gt;Web Link"

     

    (Also this has the page open in a new browser)

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 10:11 AM   in reply to dhosford

    Devon,

     

    I acutally just checked out Shadowbox, I had not used it before.  It looks clean and works like a charm.  Easier to install and seems to have the same features as prettyPhoto or lightbox.  Thanks for that suggestion.  I am going to use it rather than Lightbox.

     

    Thanks!!

     

     

     

    Kinetic,

     

    I never did figure out why it isn't working and I'm not a javascript genius even though I would love to be.  The way it works on your site is nice though, I don't mind it opening in the same browser window because users instictively use the back button to return to your site.  My situation was a bit different becuase it wouldn't open the link at all unless I right clicked and chose "open in new window".  I figured most people would just think the link in broken and don't want that. 

     

    I noticed you are out of Rock Hill, I'm in Charlotte .  Locals. 

     

    Thanks!

    Amanda

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 10:17 AM   in reply to Amanda Baucom

    Amanda,

     

      I'm so glad that I was able to help (in a small way) Shadowbox is great. It makes the images look 10x better in my opinion too because of the lack of a border. Also it will honor the customization of your link in the caption if you give it an id/class. Let me know if you need any more help!

     

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 10:28 AM   in reply to dhosford

    The only issue I have with it is that in lightbox my captions could be a couple paragraph's long and they sat below the images, in shadowbox they are above the image and can only be a few words long.  I am fiddling with it right now to see if I can expand or move the caption to the bottom.

     

    http://amandabaucom-portfolio.com/ddr/ddr_new_phpmod/index.php?section =success

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 10:29 AM   in reply to Amanda Baucom
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 6:12 AM   in reply to dhosford

    Hi.

    I Have used the corect answer of this topic here and it worked perfectly. i have allso added an image as a link. Thank you for help.

    Is it possible to add more than one link?

     

    Here is my code:

     

    <li> <a href="images/contacts/2c.jpg" rel="lightbox" title="&lt;a href=&quot;http://www.jaga.lt/ &quot; target=&quotblank&quot&gt; &lt;img src=&quot;images/contacts/1p.jpg&quot;  &lt;/a&gt;"></a> </li>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2014 2:34 AM   in reply to dhosford

    Hi dhosford,

    I have the same request.

    I follow yous steps, everything seems to work, but the action does not start (I'm using lightbox)

    this is my code:

    <a href="../images/Pittura/Alex Folla - Unheimlich 07.jpg" rel="lightbox[Black&White]" title="Alex Folla, UNHEIMLICH 07, 145 x 100 cm, 2013, mixed media (oil on grounded canvas, bitumen, enamel)&lt;a href=&quot;https://drive.google.com/file/d/0B5DctcO6z2EXSVJzQ0lyVkdGNEU/edit?usp= sharing" target=&quotblank&quot&gt;Hi resolution">

    and this is my page (I did a test on the first foto):

    http://alexfolla.altervista.org/eng/paint01.html

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2014 1:42 PM   in reply to alexfolla

    Try this:

     

     

    title="&lt;a href=&quot;http://example.com">Example.com</a> 
    some plain text here... 
    &lt;a href=&quot;http://example.com">Example.com</a>">

     

     

    I don't like all this code appearing inside the tooltip on hover. I think it looks nicer if you use a caption attribute instead.

     

     

    title="optional title"
    
    caption="&lt;a href=&quot;http://example.com">Example.com</a> 
    some plain text here... 
    &lt;a href=&quot;http://example.com">Example.com</a>">

     

    Of course, you'll need to amend your function code to make it work.

     

    beforeLoad: function() {

        this.title = $(this.element).attr('caption');

       }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2014 10:27 PM   in reply to Nancy O.

    I'm agree. caption attribute is better.

    I tried your code:

    http://alexfolla.altervista.org/eng/paint01.html

     

    <a href="../images/Pittura/Alex Folla - Unheimlich 07.jpg" rel="lightbox[Black&White]" title="Alex Folla, UNHEIMLICH 07, 145 x 100 cm, 2013, mixed media (oil on grounded canvas, bitumen, enamel)" caption="&lt;a href=&quot;http://example.com">Example.com</a><a href="http://example.com" target="_blank">Example.com</a &gt;&quot><img src="../images/Pittura/Alex Folla - Unheimlich (07).jpg" alt="Unheimlich 07" name="Unheimlich07" width="41" height="60" hspace="4" vspace="4" border="1" id="Unheimlich07" /></a>

     

    Now I have 2 problems

    the lightbox expands clicking on the first "1Example.com"  instead of the image.

    the second "2Example.com" works fine. but I need that is in the text of thelightbox. like this:bb.jpg

    I tried to solve the problem. but seems too hard for me...

    thanks for your time

    Alex

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 8:09 AM   in reply to alexfolla

    I no longer use lightbox.  I prefer Fancybox because you can do more with it.  Copy & paste  this code into a new, blank document.  SaveAs test.html and preview in browsers.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, with Fancybox2 and Captions</title>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--LATEST JQUERY CORE LIBRARY-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <!--FANCYBOX plugins-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
    <style>
    /**LINKS**/
    a {text-decoration:none}
    a:link {color:#FF0}
    a:visited {color:#920000}
    a:hover, a:active, a:focus {text-decoration:underline}
    
    /**this styles image container**/
    #thumbs p {
        float: left;
        width: 180px;
        margin: 10px;
        padding: 10px;
        text-align: center;
        border: 1px solid silver;
        /**rounded borders**/
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
    
    }
    
    /**recommend using same size images**/
    #thumbs img {
        width: 160px; /**adjust width to thumbnail**/
        height: 120px; /**adjust height to thumbnail**/
        opacity: 0.75;
    }
    
    #thumbs img:hover { opacity: 1.0 }
    
    /**float clearing**/
    #thumbs:after {
        content: ".";
        clear: left;
        font-size: 0px;
        line-height: 0;
        display: block;
        visibility: hidden;
    }
    </style>
    </head>
    
    <body>
    <h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>
    <h2>Captions contain text and links</h2>
    
    <div id="thumbs"> 
     <!--insert thumbnails with links to full size images below--> 
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional title" caption="&lt;a href=&quot;http://example.com">Example.com</a>  some plain text here...   &lt;a href=&quot;http://example.com">Example.com</a>"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> </p>
    
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional title" caption="&lt;a href=&quot;http://example.com">Example.com</a>  some plain text here...   &lt;a href=&quot;http://example.com">Example.com</a>"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> </p>
    
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional title" caption="&lt;a href=&quot;http://example.com">Example.com</a>  some plain text here...   &lt;a href=&quot;http://example.com">Example.com</a>"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> </p>
    
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional title" caption="&lt;a href=&quot;http://example.com">Example.com</a>  some plain text here...   &lt;a href=&quot;http://example.com">Example.com</a>"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> </p>
    
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional title" caption="&lt;a href=&quot;http://example.com">Example.com</a>  some plain text here...   &lt;a href=&quot;http://example.com">Example.com</a>"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 5" /></a> </p>
    
    <!--end thumbs--></div>
    
    <!--FancyBox function code--> 
     <script>
     $(document).ready(function() {
        $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
         beforeLoad: function() {
         this.title = $(this.element).attr('caption');
            }
        });              
    });
    </script>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2014 10:24 PM   in reply to Nancy O.

    I've been away for work for a week, I have just returned. Now I try your suggestion

    thanks a lot

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 24, 2014 6:47 AM   in reply to Nancy O.
    I solved it. it works perfectly
    thank you very much

     

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points