Problem with back + next in Thumbnail viewer

[Al Fresco]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: Hi. I'm using the Image Thumbnail Viewer II which is working well in this image gallery test page: http://www.anneknowles.com.au/withoutscript
When I add the following script to to the thumbnail.js file to implement back and next buttons the whole thing stops. ie: http://www.anneknowles.com.au/withscript

The script added is:


///////No need to edit beyond here/////
function findLoaded(){
if(typeof document.getElementById('dynloadarea').getElementsByTagName('img')[0]!=='undefined'){
var theImg = document.getElementById('dynloadarea').getElementsByTagName('img')[0].src
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
if (theImg.indexOf(dynimages[i_tem][0])>-1)
return i_tem
}
else
return -1
}

function nextImg(){
if (findLoaded()<dynimages.length-1)
modifyimage('dynloadarea', findLoaded()+1)
else
modifyimage('dynloadarea', 0)
}

function previousImg(){
if (findLoaded()>0)
modifyimage('dynloadarea', findLoaded()-1)
else
modifyimage('dynloadarea', dynimages.length-1)
}

As seen in this post: http://www.dynamicdrive.com/forums/showthread.php?t=8291

It may be a conflict with Animated Collapsible DIV v2.4 or perhaps I have made some error elsewhere. Not sure. Can you help please?

Many Thanks.

[jscheuer1]

That add on (March 2006) is not compatible with the current version of the main script (Feb. 2007). When I have some time, or sooner, I will look into whether or not it can be adapted to the newer version of the main script.

But PERHAPS - if you tell me in detail what you want to achieve - I may know of some other current script that can accomplish your goal.

[Al Fresco]

Hi John,

Thanks for the reply. I have been trying so long that my beards gone gray! Good to know that for now that that script combo won't work.

Anyway. I'm looking to have a gallery that has a collapsible thumbs div. (thumbs off at start) as well as forward (+) and back (-) buttons. Please see this example: http://www.anneknowles.com.au/withoutscript

I would also like to have a collapsible nested menu on the left which when each selection is made loads an initial image for that section. (+ and - visible, thumbs off at start) I really like this style of menu:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm but am not sure if it will cause conflict.

So I guess what I am looking for is a combo of:

For the Thumbs (but with forward and back).
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

and for the collapse thumb div.:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

and for the menu:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

I hope this all makes sense. Any ideas?
Many Thanks

[jscheuer1]

This script:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

already may have prev/next buttons, which you may use + and - for if you like. It also may have thumbnails, I recently developed the code for that here:

http://www.dynamicdrive.com/forums/showthread.php?t=48725

as long as there are no script conflicts, and this script is written in such a way as to not conflict with most scripts, it may be combined with many scripts. As the other scripts you are referring to also use jQuery as does this script, you need only link to the jQuery script once.

[Al Fresco]

Hi John,
Thanks for that code. It looks like it could do the trick. I have had a play with it and have the following questions.

1. I am having trouble getting the thumbnails to link. The test thumbs show up fine in the collapsible div but don’t link . Could you please have a look. http://www.anneknowles.com.au/testfade/index.html

Also
2. Is there a way to align all images (different heights) horizontally to the top of the fadeshow.


Many Thanks.

[jscheuer1]

Where you have:


onclick="mygallery.navigate(0); return false;"

and similar, since you have defined your gallery as:


var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [751, 450], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [
["images/bl . . .

You should use:


onclick="mygallery1.navigate(0); return false;"

The slide show automatically centers the images by calculating top and left margins visa vis the gallery's dimensions and the image's dimensions. To override this for the top margin, you may use overriding style employing the !important keyword in your stylesheet:


.gallerylayer img {
margin-top: 0!important;
}

[Al Fresco]

Arrrgh. I missed that '1'

That's perfect John. You Rock.
Thanks.