add url link in "lightbox style" js gallery

[kineticcreative123]

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.

[dhosford]

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]

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 · Accepted solution]

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!

[kineticcreative123]

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

[Nancy OShea]

Try this:

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

Nancy O.

[kineticcreative123]

Nancy,

Thank you as always!!

[kineticcreative123]

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.

[dhosford]

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

[kineticcreative123]

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

[dhosford]

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!

[kineticcreative123]

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.

[dhosford]

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

[Guest]

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

[Nancy OShea]

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.

[Guest]

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:

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

thanks for your time

Alex

[Nancy OShea]

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.

[Guest]

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

thanks a lot

[Guest]

I solved it. it works perfectly
thank you very much

[spikeRush]

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

[dhosford]

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

[spikeRush]

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

[dhosford]

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

[dhosford]

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)

[spikeRush]

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