Gallery script not functioning

[jessamca]

I am trying to make a web gallery using the following code on my blog, and the thumbnail images will not load. I tried it out another a blank blog, and it worked fine, so I know I must have something embedded on my site that is preventing it from working. Any recommendations on what to change?



Many thanks




<div id="content">
<script type="text/javascript">
function myshowImages(id) {

/**$(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');

}
</script>
<script>
$(document).ready(function () {
$('.email-sign-up').css({'marginBottom':'0px'});
})
</script>

<div class="product">
<div class="galerie">
<div class="bigPics">
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic" />
</a>
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" />
</a>
</div>

<div class="thumbnails">
<div class="mini-thumb">
<a href="javascript:myshowImages(0)" >
<img src="insert" title="" alt="" />
</a>
</div>
<div class="mini-thumb">
<a href="javascript:myshowImages(1)" >
<img src="insert" title="" alt="" />
</a>
</div>

[jscheuer1]

Works fine here.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[jessamca]

Yes, the script works fine, i tested it on another site as well. i think there is something in my current template that is not allowing it to work. i published the post where it is not functioning for you to see now.

[jessamca]

oops! i didnt realize the link didnt attach, my mistake!

[jscheuer1]

Ah, I had removed the link because I couldn't find the code on the page. I'm not sure why that happened, I see it there now.

There could be other problems but the code in your post requires the jQuery script library. I added it to the page and the gallery worked, so that might be the only problem.

Where you have this:


</tbody></table></div><script type="text/javascript">
function myshowImages(id) {

/* $(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');

}
</script><br />

Make it like so:


</tbody></table></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
function myshowImages(id) {

/* $(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');

}
</script><br />

[jessamca]

it works, THANK YOU!!!!