Fancy box images appear twice

1,044 views
Skip to first unread message

Deborah Bulling

unread,
Dec 18, 2010, 7:19:37 PM12/18/10
to fanc...@googlegroups.com
Hi,

I have been working on a portfolio for my web design business.  I am using Fancybox to enlarge images of my graphics and website screen shots.  The fancybox part is working well, except that when it opens an image and you use the forward or back arrows, it re-loads the same image.  So you end up having to look at the image twice before it moves on to the next one.

Can you help me find a fix for that?

Here is the link to my portfolio page.  Just select one of the images and you'll see what I mean.

I am also using a script (boxgrid) that puts a comment over the image thumbnail.  The website archive link does not include that feature and it is the only page that is only displaying the image one time, so it may have something to do with that added script.

Thank you in advance for your help.  You were amazing the last time I needed help.



Ian S

unread,
Dec 19, 2010, 11:39:30 AM12/19/10
to fanc...@googlegroups.com
If you right click one of the thumbnails and Inspect element you'll see that the anchor pointing to your image is duplicated.  
You need to remove one of the anchors or don't include it in the 'websites' gallery.

- Ian


--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

Deborah Bulling

unread,
Dec 19, 2010, 2:19:19 PM12/19/10
to fanc...@googlegroups.com
Hi Ian,

I'm a bit confused.  I right clicked and chose Inspect element and I see what you are talking about with the anchor being duplicated.  However, my actual code looks like this.

<td>
<a class="portfolio_layout" rel="websites" href="PortfolioImages/DDH.jpg" title="Dan's Duck Hunts Website Image">
<div class="boxgrid caption">
<img src="PortfolioImages/thumbnails/ddh.jpg" width="150" height="150" alt="Dan's Duck Hunts website image" /></a>
<div class="cover boxcaption">
<p>Dan's Duck Hunts<br/><br/><a href="http://www.dansduckhunts.com" target="_blank">View Website</a></p>
</div><!--cover boxcaption-->
</div><!--boxgrid caption-->
</td>

I don't understand where the second anchor is coming from.  When I remove the rel="websites" from the a link on the first line above, then the image just opens in a new browser window.  

Can you help me understand what's going on here?

Deborah Bulling
DebsWebs LLC




Deborah Bulling

unread,
Dec 19, 2010, 2:36:57 PM12/19/10
to fanc...@googlegroups.com
Hi Ian,

I figured it out!!!

I moved the "<div class="boxgrid caption">" outside the anchor link and that removed the second anchor that pointed to the large image.  I don't know why, but it worked.

Thanks for pointing me in the right direction.

Deborah Bulling
DebsWebs LLC





On Dec 19, 2010, at 10:39 AM, Ian S wrote:

Reply all
Reply to author
Forward
0 new messages