Gallery with thumbnails but not showing other images

[jasch]

Hi I've noticed some upgrades to highslide since my last implimentation of the code. I currently have set up a gallery that does not show all of the other images, but when the "photo button" is clicked it shows or plays through a set of images contained in a hidden div container. I've noticed that with the newer version of highslide it uses ul's and li's as the building block of the html code. My question is: Is there a way to have my current set up but impliment the newer features of Highslide such as thumbnail gallery (once it's clicked)? If so how would I go about implimenting it in my current code?

<script type="text/javascript" src="../highslide/highslide/highslide-full.packed.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = '../highslide/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.80;
hs.showCredits = false;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'photos',
interval: 4000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
offsetX: '0',
offsetY: '-15',
hideOnMouseOut: false
}
});
</script>
HTML IS HERE//////

<div class="highslide-gallery">
<div id="PhotoIcon" onmouseover="MM_showHideLayers('photoPop','','show')" onmouseout="MM_showHideLayers('photoPop','','hide')"><a id="thumb1" href="<cfoutput>#gListing.Folder#</cfoutput>/photos/FRONT.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photos' })">
</a> </div>
<!--END PHOTO ICON-->

<!--HIDDEN PHOTOS FOR SLIDSHOW -->
<div class="hidden-container">
<cfoutput query="gphotos">
<a href="#gListing.Folder#/photos/#gphotos.photoname#" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 'photos' })"></a>
<div class="highslide-caption">
#gphotos.description#
</div>
</cfoutput>

</div> <!--ENDS HIGHSLIDE HIDDEN CONTAINER-->

</div> <!--ENDS highslide-gallery-->

DEMO OF ACTIVE WEBPAGE HERE:
http://www.mynkyhome.com/LISTINGS/Listi ... tingID=268

[RoadRash]

You donÔÇÖt have to use ul and li tags in your HTML code. Take a look at the barebones sample pages ÔÇô none of the galleries there are using ul and li tags. You can copy the js settings/overrides from one of the sample galleries, or you can copy js settings/overrides from the Editor. Remember to replace both the js file and CSS files when upgrading Highslide.

[jasch]

Thank you for your response.. I really appreciate how quickly you all respond

However, I can't seem to get the page to animate correctly in IE8. From the test I've run it works correctly in firefox & safari but of course not IE8 or IE7

Page is here: http://www.mynkyhome.com/LISTINGS/Listi ... tingid=271

Any thoughts?

[torstein.honsi]

Setting a higher transitionDuration in your page reveals that the crossfade transition actually runs, but apparently something in your page is causing it to run slowly so that it doesn't actually show any of the intermediate frames when the transition duration is the default 250 ms. Try removing other elements (scripts, CSS, HTML) in your page and see if there is any particular code that makes IE run slowly.