Skip to main content
kineticcreative123
kineticcreative123
Inspiring
June 12, 2012
Answered

add url link in "lightbox style" js gallery

  • June 12, 2012
  • 1 reply
  • 32359 views

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.

    This topic has been closed for replies.
    Correct answer dhosford

    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!

    1 reply

    dhosford
    dhosford
    Participating Frequently
    June 14, 2012

    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

    kineticcreative123
    kineticcreative123Author
    Inspiring
    June 14, 2012

    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!

    dhosford
    dhosfordCorrect answer
    Participating Frequently
    June 14, 2012

    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!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices