I'm currently re-writing my photography website and integrating a custom cart system into the gallery pages. The cart system's been a piece of cake so far, but I've come up against an unexpected and pretty solid wall for some reason.
The page in question: removed
What I'd like to do: Display some inline content (an image, some information on it, and an add to cart form) for each image when its thumbnail is clicked. It's important that I can group these inline elements in a gallery fashion, so that you can pass between them with the navigation links, rather than having to load the inline content for each image separately.
At the moment, I just can't get it to display my hidden div, and I'm at a loss as to why. The fancybox js script loads up and the gallery-style grouping works, but for some reason it's only displaying the thumbnail image, rather than the hidden div it's supposed to.
The relevant header code:
The relevant code for each image:
If anyone has any smart ideas, I'm all ears. Thanks guys
The page in question: removed
What I'd like to do: Display some inline content (an image, some information on it, and an add to cart form) for each image when its thumbnail is clicked. It's important that I can group these inline elements in a gallery fashion, so that you can pass between them with the navigation links, rather than having to load the inline content for each image separately.
At the moment, I just can't get it to display my hidden div, and I'm at a loss as to why. The fancybox js script loads up and the gallery-style grouping works, but for some reason it's only displaying the thumbnail image, rather than the hidden div it's supposed to.
The relevant header code:
Code:
<script type="text/javascript" src="fancybox/jquery-1.4.2.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<link href="fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$(".inline").fancybox({
'type':'inline'
});
});
</script>The relevant code for each image:
Code:
<a class=\"inline\" rel=\"img_group\" title=\"This is the title\" href=\"#hidden_div_".$id_hidden_div."\"><img border=\"0\" src=\"$thm_url\" alt=\"Gallery thumbnail\"/></a>
...
<div id=\"hidden_div_".$id_hidden_div."\" style=\"display:none\">
... This is some filler text ...
<img border=\"0\" src=\"$img_url\" alt=\"Gallery image\"/>
</div>If anyone has any smart ideas, I'm all ears. Thanks guys
Last edited:
