jquery gallery

I am building a development site for a client at http://www.philippa.e-concepts.co.uk/index_gallery.htm based on the code found at http://flowplayer.org/tools/demos/overlay/gallery.html, but as you'll see...when the page first loads the next and previous buttons do not work, however, if you double-click on a thumbnail , the chosen image then loads and they do work. Ideally, I want only the thumbnails to show initially, but I can't seem to acheive that. Any ideas please?

Thanks in advance
JuliamacAsked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>

	<title>jQuery Tools standalone demo</title>

	
	
	<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
	<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
	
</head>

<!-- without body tag IE may have unprodictable behaviours -->
<body>

<!-- now that jQuery Tools is included we can begin with the actual demo -->



<style>

body {padding-top: 10px}




/* the thumbnails */
#triggers {
	text-align:center;
}

#triggers img {
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	margin:15px 2px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* the active thumbnail */
#triggers a.active img {
	outline:1px solid #000;

	/* show on top of the expose mask */
	z-index:9999;
	position:relative;
}
</style>

<!-- trigger elements
<div id="triggers">
	<a href="http://farm4.static.flickr.com/3155/2636513939_cd75b704ec.jpg" title="Berlin New National Gallery">
		<img src="http://farm4.static.flickr.com/3155/2636513939_cd75b704ec_s.jpg" /></a>

	<a href="http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1.jpg" title="Alternate view of the Gallery">
		<img src="http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1_s.jpg" /></a>

	<a href="http://farm4.static.flickr.com/3435/3276760045_742ebd4663.jpg" title="Mies: Barcelona Pavilion">
		<img src="http://farm4.static.flickr.com/3435/3276760045_742ebd4663_s.jpg" /></a>

	<a href="http://farm4.static.flickr.com/3420/3755900866_95e61c6df2.jpg" title="Minimalistic design inside the Gallery">
		<img src="http://farm4.static.flickr.com/3420/3755900866_95e61c6df2_s.jpg" /></a>

	<a href="http://farm4.static.flickr.com/3247/2400693384_9e8776d482.jpg" title="Romantic outdoor view">
		<img src="http://farm4.static.flickr.com/3247/2400693384_9e8776d482_s.jpg" /></a>


	<a href="http://farm1.static.flickr.com/40/122343298_22333fb8e3.jpg" title="Plain and simple. Like it should be.">
		<img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />	</a>

</div> -->

<!-- trigger elements -->
<div id="triggers">
	<a title="expectation management" href="http://www.philippa.e-concepts.co.uk/gallery_files/image1.jpg" class="">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image1_s.jpg"></a>

	<a title="let battle commence" href="http://www.philippa.e-concepts.co.uk/gallery_files/image2.jpg" class="">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image2_s.jpg"></a>

	<a title="Appropriate Needs" href="http://www.philippa.e-concepts.co.uk/gallery_files/image3.jpg" class="active">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image3_s.jpg"></a>

	<a title="nude standing" href="http://www.philippa.e-concepts.co.uk/gallery_files/image4.jpg" class="">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image4_s.jpg"></a>

	<a title="last chance on the bingo wing express" href="http://www.philippa.e-concepts.co.uk/gallery_files/image5.jpg" class="">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image5_s.jpg"></a>

	<a title="nude seated" href="http://www.philippa.e-concepts.co.uk/gallery_files/image6.jpg" class="">
		<img src="http://www.philippa.e-concepts.co.uk/gallery_files/image6_s.jpg">	</a>
</div>

<!-- overlay styling -->
<link rel="stylesheet" type="text/css" href="http://www.philippa.e-concepts.co.uk/gallery_files/overlay-basic.css"/>

<!-- gallery specific styling -->
<link rel="stylesheet" type="text/css" href="http://www.philippa.e-concepts.co.uk/gallery_files/overlay-gallery.css"/>



<!-- overlay element -->
<div class="simple_overlay" id="gallery">

	<!-- "previous image" action -->

	<a class="prev">prev</a>

	<!-- "next image" action -->
	<a class="next">next</a>

	<!-- image information -->
	<div class="info"></div>

	<!-- load indicator (animated gif) -->

	<img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" />
</div>





<script>
$(function() {

// select the thumbnails and make them trigger our overlay
$("#triggers a").overlay({

	// each trigger uses the same overlay with the id "gallery"
	target: '#gallery',

	// optional exposing effect
	expose: '#f1f1f1'

// let the gallery plugin do its magic!
}).gallery({

	// the plugin accepts its own set of configuration options
	speed: 800
});
});
</script>

</body>

Open in new window

0
 
exalkoniumCommented:
Try moving your script to the <head> of your page and see if that makes a difference.
0
 
JuliamacAuthor Commented:
No, doesn't seem to have done
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LZ1Commented:
Their standalone sample has the functionality your looking for.  Did you view the source to see how it's done?
0
 
LZ1Commented:
0
 
JuliamacAuthor Commented:
It's the standalone one I'm using, I must have missed something!
0
 
LZ1Commented:
It looks like the one on your page is giving an inline style of display:block.  Remove that and it won't show up until a thumbnail is clicked
0
 
JuliamacAuthor Commented:
Hi LZ1,

thanks, but it not working
0
 
LZ1Commented:
Try putting the script at the very end of the page right before the closing body tag.
0
 
JuliamacAuthor Commented:
No, no good I'm afraid
0
 
LZ1Commented:
That was really the only difference between the two pages as far as I could tell.  Let me keep comparing.
0
 
JuliamacAuthor Commented:
Should I be referencing a separate domain? I noticed they are referencing flicker...long shot?!
0
 
LZ1Commented:
That shouldn't interfere with the script.  You downloaded the exact same scripts and css from the standalone page right?
0
 
JuliamacAuthor Commented:
Yes, the same script/html, but I adapted the urls and the image paths. The css was contained in the gallery files folder and I haven't edited it at all, but simply uploaded it as is.
0
 
LZ1Commented:
That's what's weird.  The difference should be either script oriented or css oriented.
0
 
LZ1Commented:
On your source code I found that it is rendering the image first where as on the demo page it's not.
Do you have this in your original page?
<!-- overlay element --> <div style="position: absolute; z-index: 10000; top: 161.6px; left: 378px; display: block; width: 500px; height: 500px;" class="simple_overlay" id="gallery"><img src="gallery_files/image3.jpg" style="visibility: visible; display: inline;" id="img"><div style="display: none;" class="close"></div>  
0
 
JuliamacAuthor Commented:
I also edited the initial image size to 500px * 500px
0
 
JuliamacAuthor Commented:
Fantastic. Thank you!
0
 
JuliamacAuthor Commented:
Oh no!

Jumped the gun...it deosn't work after the first one!
0
 
LZ1Commented:
What do you mean?
0
 
JuliamacAuthor Commented:
If I refresh the page, just the gallery appears...great...but then, if I click on next, only an empty grey box appears
0
 
LZ1Commented:
I double checked your link above and even did it in different browsers, and it worked fine.  You have the new one uploaded right?
0
 
JuliamacAuthor Commented:
Apologies, it is working OK, don't know whatr happened there. Thanks very much for coming back to me and for all your help.
0
All Courses

From novice to tech pro — start learning today.