• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

add url link in "lightbox style" js gallery

Contributor ,
Jun 12, 2012 Jun 12, 2012

Copy link to clipboard

Copied

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.

Views

28.8K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Jun 14, 2012 Jun 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

...

Likes

Translate

Translate
Jun 14, 2012 Jun 14, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 14, 2012 Jun 14, 2012

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jun 14, 2012 Jun 14, 2012

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

Try this:

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

Nancy O.

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

Nancy,

Thank you as always!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 17, 2012 Jun 17, 2012

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jun 17, 2012 Jun 17, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 18, 2012 Jun 18, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jun 18, 2012 Jun 18, 2012

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 18, 2012 Jun 18, 2012

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jun 19, 2012 Jun 19, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 15, 2014 Feb 15, 2014

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2014 Feb 15, 2014

Copy link to clipboard

Copied

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.

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 15, 2014 Feb 15, 2014

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 17, 2014 Feb 17, 2014

Copy link to clipboard

Copied

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.

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 23, 2014 Feb 23, 2014

Copy link to clipboard

Copied

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

thanks a lot

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 24, 2014 Feb 24, 2014

Copy link to clipboard

Copied

LATEST
I solved it. it works perfectly
thank you very much

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 19, 2012 Jul 19, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jul 19, 2012 Jul 19, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 19, 2012 Jul 19, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jul 19, 2012 Jul 19, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jul 20, 2012 Jul 20, 2012

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 20, 2012 Jul 20, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines