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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
LZ1Commented:
Their standalone sample has the functionality your looking for.  Did you view the source to see how it's done?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
LZ1Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.