PDA

View Full Version : Resolved Combine Image Thumbnail Viewer II & Ultimate Fade-in slideshow



lio
01-05-2009, 12:13 PM
1) Script Title:
Image Thumbnail Viewer II
Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
I'd like to combine the 2 scripts : slideshow when I click on thumbnail images

Can somebody help me ?

Merci and happy new year :)

Snookerman
01-05-2009, 12:23 PM
Do you want the slideshow to run and when you hover over it, a bigger image to appear?

lio
01-05-2009, 12:28 PM
I would like to run a slideshow 1 when you hover on the the thumnail 1, a slideshow 2 when you hover the thumbnail 2, etc...

Snookerman
01-05-2009, 01:31 PM
I made this with jQuery (http://jquery.com/) instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Slideshow</title>
<script type="text/javascript" src= "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src= "http://malsup.com/jquery/cycle/lite/jquery.cycle.lite.min.js?v1.0">
</script>
<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '200px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('#' + $(this).attr('name')).show();
}, function(){
$('#' + $(this).attr('name')).hide();
});
});
</script>
</head>
<body>
<div id="thumbs">
<img name="slide1" src= "http://www.gamerflicks.com/images/uploads/ghostbusters_logo.gif">
<img name="slide2" src= "http://www.cracked.com/blog/wp-content/uploads/2008/05/ghostbusters2.jpg">
<img name="slide3" src= "http://members.tripod.com/~TheDorkboy/ghostbusters/gb3logo.gif">
</div>
<div>
<div id="slide1" class="slide">
<img src= "http://www.airportdirecttravel.co.uk/live/Portals/10/Turkey/Gulet-200x200.jpg">
<p>Some text that will be in the slideshow</p>
<img src= "http://www.bighappyfaces.com/happy-face-happyface-smiley-200x200.gif">
<img src= "http://aumaan.no-ip.org/Icons/icon%20-%20200x200%20-%20hot%20rod.gif">
</div>
<div id="slide2" class="slide">
<span><img src= "http://davidnaylor.org/temp/thunderbird-logo-200x200.png">Image with text</span>
<img src= "http://davidnaylor.org/temp/firefox-logo-200x200.png">
<img src= "http://markcarson.com/images/Sunbird-4-200x200.png">
</div>
<div id="slide3" class="slide">
<img src= "http://www.soton.ac.uk/~fangohr/research/vortex1/mbg/small_sph_200x200.gif">
<img src= "http://www.boingboing.net/images/_programs_fa_features_2005_06_clowes_200x200.jpg">
<img src= "http://img174.imageshack.us/img174/4823/itachixd6.png">
</div>
</div>
</body>
</html>

What you need to make sure is that the elements in the "thumbs" div have the same name as the slideshows they will show. For example the first image with the name "slide1" will show the first slideshow with the id "slide1". You can put anything you want as thumbnails or as slides, not just images. All elements in containers with the "slide" class will be treated as a slide. All elements inside the "thumbs container will work as thumbs as long as the have the correct name. You can also take a look at the plugin I used for more settings for the slideshow:
http://malsup.com/jquery/cycle/lite/ (http://malsup.com/jquery/cycle/lite/)

Good luck and ask if you need any help or explaining.

lio
01-05-2009, 03:32 PM
Thanks a lot, it is exactly was I wanted to have :)
I will adapt it to a website.

One question : it works well but needs with IE7 to authorize the active-X controls when you arrive on this page ; will all people do it or go away :confused: and is there another solution :rolleyes:

Snookerman
01-05-2009, 03:48 PM
You're welcome!

You don't have to worry about the active-x message in IE. You only get that when you view pages with JavaScript offline. When you upload your page to the server you won't get that warning.

lio
01-09-2009, 11:26 AM
Hello ;)

So it works well, but I have some problems when I try to change some things, particulary in jquery-1.2.6.min.js & jquery.cycle.lite.min.js?v1.0 :p

1) If I want to change from the "mouseover" to the activated "click" on the thumbs, with slideshow pause when onMouseover on the image of the slideshow, how can I change that ?
2) When I try to split the thumbs in 2 different div, it does not work anymore ; is it possible to have this ?
3) I have put the slideshow in a div, but the relative position of the slideshow is... bizarre : not in the center when I put it in the center, etc... ??

Merci :)

lio
01-12-2009, 08:45 PM
Well, I have found how to keep the enlarged image when I put the mouse away from a thumb

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '90px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('#' + $(this).attr('name')).show();
}, function(){
$('#' + $(this).attr('name')).show();
});
});
</script>

BUT after the slideshow corresponding to the last thumb it is no more possible to come back to another slideshow :confused:

Snookerman
01-12-2009, 09:26 PM
If you want us to be able to help you:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

lio
01-12-2009, 10:08 PM
of course...:o here is the "prototype" :
http://varianscuirs.com/cuirs_luxe/cuirs-femmes-pin-up.htm

Snookerman
01-12-2009, 10:14 PM
I see you changed the code a bit, tell me exactly what effect you want to achieve and I'll change it for you so it works :D

lio
01-12-2009, 10:30 PM
1) The major problem is that you cannot activate the slideshow 1 (mouseover thumb 1) after have seen the slideshow 2 (mouseover thumb 2) for example, only go to slideshow n+1.

2) Second issue is the position of the large images in the container : it is not in the center of the container when I try to put it so.

3) Would it be possible to have the thumbs in 2 different div's ? I have tryed but I had no slideshow with the thumbs from the second container

Some of my questions are probably very easy... but I'm more photographer than coder :D

Snookerman
01-12-2009, 10:41 PM
If I understand you correctly, you want the slide to continue after your mouse leaves the thumb? If yes use this code:

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '200px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('.slide').hide();
$('#' + $(this).attr('name')).show();
});
});
</script>


By the way, the height you can see there (200px) is the height that is set to the thumbnail images, change that to what you want it to be.

Good luck!

lio
01-12-2009, 10:49 PM
Yes ! Major problem solved, thanks :)

Snookerman
01-12-2009, 10:55 PM
Alright, #3 if you want to have the thumbs in different divs, give every div a class value of thumbs (it's now an id, change it to class) and then change your code to this:

<script type="text/javascript">
$(function(){
$('.thumbs img').css({
'height': '200px'
});
$('.slide').cycle();
$('.slide').hide();
$('.thumbs img').hover(function(){
$('.slide').hide();
$('#' + $(this).attr('name')).show();
});
});
</script>

I'll take a look at the other stuff tomorrow, I've got some work to do now :o

Good luck!

lio
01-12-2009, 10:57 PM
Thanks again, I try tomorrow ;)

Giotto3
01-17-2009, 04:00 PM
I very new to the Forum and Java Scripting, but by reading your thread I managed to use these scripts and it is working fine - just what I was looking for. I have one question. Is it possible to take it further and make so that the slide show continues from slide1 to slide2, etc. In other words, not only the images that belong to slide1 row will appear but all of them?
Sorry, if I sound not too clear - I am trying my best.

Thank you.



If I understand you correctly, you want the slide to continue after your mouse leaves the thumb? If yes use this code:

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '200px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('.slide').hide();
$('#' + $(this).attr('name')).show();
});
});
</script>


By the way, the height you can see there (200px) is the height that is set to the thumbnail images, change that to what you want it to be.

Good luck!

Snookerman
01-17-2009, 05:24 PM
That would require some changes to the plugin but there is a workaround. What you can do is put all the images in all the elements but in different order. For example, if you have three slideshows A, B and C and you want images 1, 2 and 3 in A, 4, 5 and 6 in B and 7, 8 and 9 in C like this:

A: 1, 2, 3
B: 4, 5, 6
C: 7, 8, 9
put them in this order instead:

A: 1, 2, 3, 4, 5, 6, 7, 8, 9
B: 4, 5, 6, 7, 8, 9, 1, 2, 3
C: 7, 8, 9, 1, 2, 3, 4, 5, 6
Then you would have to make just a small change to make the slideshow start over every time you hover over an image, I think this should do it:

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '200px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('.slide').hide();
$('.slide')).cycle();
$('#' + $(this).attr('name')).show();
});
});
</script>

Good luck!

lio
01-25-2009, 07:51 PM
Hello Snookerman,
One more question ;)
With the modified script that allows the slide to continue after the mouse leaves the thumb, there could be an improvement = show which thum is activated by for example a modification of the activated thumb.
I have tryed... :( and need your help again :rolleyes:

Snookerman
01-25-2009, 10:02 PM
Sure, that can be done easily, can you just post the code you are using now so I know which one to modify?

lio
01-25-2009, 10:49 PM
Sure, that can be done easily, can you just post the code you are using now so I know which one to modify?


Here is a the code that does not work as I would like to...

_____________________________

<head>
...

<script type="text/javascript" src= "jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src= jquery.cycle.lite.min.js?v1.0">
</script>

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '90px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').click(function(){
$('.slide').hide();
$('#' + $(this).attr('name')).show();
});
});
</script>


<body>
<div id="thumbs">
<img name="slide1" src="v1.jpg" onclick="this.src='v1r.jpg'" onmouseout="this.src='v1.jpg'">
<img name="slide2" src="v2.jpg" onclick="this.src='v2r.jpg'" onmouseout="this.src='v2.jpg'">
</div>
<div>
<div" id="slide1" class="slide>
<img src="img10.gif">
<img src="img11.gif">
<img src="img12.gif">
</div>
<div id="slide2" class="slide">
<img src="img20.gif">
<img src="img21.gif">
<img src="img22.gif">
</div>
</div>
</body>

Snookerman
01-25-2009, 11:13 PM
Try this:

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '90px',
'padding': '10px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').click(function(){
$('.slide').hide();
$('#' + $(this).attr('name')).show();
$('#thumbs img').css({
'background':'#fff'
});
$(this).css({
'background':'#f00'
});
});
});
</script>
You just need to play around with it so you achieve the effect you want.

Good luck!

lio
01-26-2009, 09:46 AM
thanks :)

novastar
07-21-2011, 04:46 PM
Can anyone help me with something similar to this? I need help with thumbnail viewer II and Featured Image Zoomer.