29 Replies Latest reply: Feb 24, 2014 6:47 AM by alexfolla RSS

    add url link in "lightbox style" js gallery

    kineticcreative123 Community Member

      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.

        • 1. Re: add url link in "lightbox style" js gallery
          dhosford Adobe Employee

          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

          • 2. Re: add url link in "lightbox style" js gallery
            kineticcreative123 Community Member

            Devon,

            Thank you for your message. Either the link in the caption area to the webpage or clicking on the photo would works. really whatever is easiest. I know now if you click on the image it takes you to the next (just like the arrow) but opening up the link from clicking on the photo would work as well:)

             

            Thanks again!

            • 3. Re: add url link in "lightbox style" js gallery
              dhosford Adobe Employee

              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!

              • 4. Re: add url link in "lightbox style" js gallery
                kineticcreative123 Community Member

                THANK YOU!!!!!

                 

                You fixed it. I really appreciate your help. I can see why you work for Adobe:) Everything is perfect but i forgot to mention I wanted the link to open in a new window.

                 

                Regards

                • 5. Re: add url link in "lightbox style" js gallery
                  Nancy O. MVP

                  Try this:

                   

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

                   

                   

                   

                  Nancy O.

                  • 6. Re: add url link in "lightbox style" js gallery
                    kineticcreative123 Community Member

                    Nancy,

                    Thank you as always!!

                    • 7. Re: add url link in "lightbox style" js gallery
                      kineticcreative123 Community Member

                      Hi Nancy,

                      I spoke too soon. I still can't get it to open in a new window. Tried variations of the code. The link works but no new window:(  This is what I have now.

                       

                      <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>  

                       

                       

                       

                      Sorry to keep bothering you on such a minor thing I should be able to fix myself.

                      • 8. Re: add url link in "lightbox style" js gallery
                        dhosford Adobe Employee

                        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! : )

                        • 9. Re: add url link in "lightbox style" js gallery
                          kineticcreative123 Community Member

                          Hello,

                          Thank you for your responses! I tried the code and my gallery box images were jumbled about the page with the image to be linked removed. See images below...

                           

                          homeview.jpg

                          codeview.jpg

                          • 10. Re: add url link in "lightbox style" js gallery
                            dhosford Adobe Employee

                            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!

                            • 11. Re: add url link in "lightbox style" js gallery
                              dhosford Adobe Employee

                              <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. : )

                              • 12. Re: add url link in "lightbox style" js gallery
                                kineticcreative123 Community Member

                                You are going to kill me. No go yet. The "Web Link"text is not showing up with the new code. Anywho here is a link to the parent files:) Thank you again,

                                 

                                http://doubleulabs.com/adobeforums.html

                                 

                                the code before this round has been put back in.

                                • 13. Re: add url link in "lightbox style" js gallery
                                  dhosford Adobe Employee

                                  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...

                                  • 14. Re: add url link in "lightbox style" js gallery
                                    Amanda Baucom Community Member

                                    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-beautiful-and.html">We b 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

                                    • 15. Re: add url link in "lightbox style" js gallery
                                      dhosford Adobe Employee

                                      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

                                      • 16. Re: add url link in "lightbox style" js gallery
                                        Amanda Baucom Community Member

                                        http://amandabaucom-portfolio.com/ddr/ddr_new_phpmod_archived/index.php?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

                                        • 17. Re: add url link in "lightbox style" js gallery
                                          dhosford Adobe Employee

                                          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

                                          • 18. Re: add url link in "lightbox style" js gallery
                                            dhosford Adobe Employee

                                            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-beautiful-and.html" target=&quot;_blank&quot;&gt;Web Link"

                                             

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

                                            • 19. Re: add url link in "lightbox style" js gallery
                                              Amanda Baucom Community Member

                                              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

                                              • 20. Re: add url link in "lightbox style" js gallery
                                                dhosford Adobe Employee

                                                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

                                                • 21. Re: add url link in "lightbox style" js gallery
                                                  Amanda Baucom Community Member

                                                  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

                                                  • 23. Re: add url link in "lightbox style" js gallery
                                                    bullacio lt Community Member

                                                    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>

                                                    • 24. Re: add url link in "lightbox style" js gallery
                                                      alexfolla Community Member

                                                      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

                                                      • 25. Re: add url link in "lightbox style" js gallery
                                                        Nancy O. MVP

                                                        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.

                                                        • 26. Re: add url link in "lightbox style" js gallery
                                                          alexfolla Community Member

                                                          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

                                                          • 27. Re: add url link in "lightbox style" js gallery
                                                            Nancy O. MVP

                                                            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.

                                                            • 28. Re: add url link in "lightbox style" js gallery
                                                              alexfolla Community Member

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

                                                              thanks a lot

                                                              • 29. Re: add url link in "lightbox style" js gallery
                                                                alexfolla Community Member
                                                                I solved it. it works perfectly
                                                                thank you very much