how to strip down a gallery

[BoT]

i was trying to strip down a "gallery in page" to it's bare bones.
i really just want a slideshow of pictures. no user input or control, no pop out, no fade effect, no next/prev arrows .. nothing fancy.
i understand that it is very difficult to impossible to draw pictures randomly out of a folder/pool.

this is what i have so far:

Code: Select all

<script type="text/javascript"> 

//<![CDATA[

hs.graphicsDir = '/js/highslide/graphics/';

hs.transitions = ['expand', 'crossfade'];

hs.restoreCursor = null;

hs.lang.restoreTitle = null;

// Add the slideshow providing the controlbar and the thumbstrip

hs.addSlideshow({

	//slideshowGroup: 'group1',

	interval: 5000,

	repeat: true,

	useControls: false,

	overlayOptions: null,

	thumbstrip: null});

hs.fadeInOut = true;

	hs.showCredits = true;

	hs.allowSizeReduction = true;

	hs.preserveContent = true;

// Options for the in-page items

var inPageOptions = {

	//slideshowGroup: 'group1',

	outlineType: null,

	allowSizeReduction: true,

	wrapperClassName: 'in-page controls-in-heading',

	thumbnailId: 'gallery-area',

	useBox: true,

	width: 400,

	height: 300,

	targetX: 'gallery-area 10px',

	targetY: 'gallery-area 10px',

	captionEval: 'this.a.title',}

// Open the first thumb on page load

hs.addEventListener(window, 'load', function() {document.getElementById('thumb1').onclick();}); 

// Cancel the default action for image click and do next instead

hs.Expander.prototype.onImageClick = function() {if (/in-page/.test(this.wrapper.className))	return hs.next();}

// Under no circumstances should the static popup be closed

hs.Expander.prototype.onBeforeClose = function() {if (/in-page/.test(this.wrapper.className))	return false;}

// ... nor dragged

hs.Expander.prototype.onDrag = function() {if (/in-page/.test(this.wrapper.className))	return false;}

// Keep the position after window resize

//]]>

</script> 

<div id="gallery-area" style="width: 400px; height: 300px; float:right; padding:10px; margin:10px "> 

<div class="hidden-container"> 

 	<a id="thumb1" class='highslide' href='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' onclick="return hs.expand(this, { autoplay:true }, 
inPageOptions)" title="EVGA 7800GTX"><img src='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' alt='EVGA 7800GTX'/></a> 

	<a class='highslide' href='inventory/gpu/nvidia/xfx_6600gt/sml00001.jpg' onclick="return hs.expand(this, inPageOptions)" title="">	<img src='inventory/gpu/nvidia/xfx_6600gt/sml00001.jpg' alt=''/></a> 

	<a class='highslide' href='inventory/mobo/msi/SNV14869_small.JPG' onclick="return hs.expand(this, inPageOptions)" title=""><img src='inventory/mobo/msi/SNV14869_small.JPG' alt=''/></a>

	<a class='highslide' href='inventory/os/ms_windows_7_homprem_upg/SNV16411.JPG' onclick="return hs.expand(this, inPageOptions)" title=""><img src='inventory/os/ms_windows_7_homprem_upg/ico00004.jpg' alt=''/></a> 

</div>
</div>

view-source:http://www.codisha.com/storefront/

1. in this line

<a id="thumb1" class='highslide' href='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' onclick="return hs.expand(this, { autoplay:true },
inPageOptions)" title="EVGA 7800GTX"><img src='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' alt='EVGA 7800GTX'/></a>

i added the autoplay to have the slideshow start once the page and picture is loaded.
problem: this is the first picture in the pool and the only one that does not remain in the defined area. all the other picture stay perfectly fine in their confines but if i scroll around the first will come back to wherever i am on the page right in the center. actually a good feature but not for what i want to do.

2. am i correct that i have to define that i don't want the thumbstrip etc as it otherwise would grab the default settings from /highslide/highslide-full.js.
i don't want to change the settings in the highslide-full.js because i might use another gallery in another page were i would like it to be able to fall back on default settings.
so i have to define features i want removed specifically, right?

3. the size reduction works well and i try to keep the images smaller anyway, sometimes i go overboard and the images are too small. is there away to enlarg/ fit images that are too small to the size of the defined area? i would like it to look like all images are the same size even thou they are not.

4. in the part were i add the image is a link. usually this is used to link the thumbnail to the original picture for the pop out effect. i won't need it for this particular gallery as i don't want any user interaction at all. this is just show. should i remove the href and if so how do i do it without breaking the syntax?

5. are there more transitions available? is there a way to randomize those?

6. i know js has the option to preload images. i noticed in another gallery i made with very large images that it seems the images are not loaded and it usually takes sometime for them to appear. i would like them to continue loading in the background . how?

[RoadRash]

1. Add autoplay to the configuration object instead.

Code: Select all

var inPageOptions = {
   //slideshowGroup: 'group1',
   outlineType: null,
   allowSizeReduction: true,
   wrapperClassName: 'in-page controls-in-heading',
   thumbnailId: 'gallery-area',
   useBox: true,
   width: 400,
   height: 300,
   targetX: 'gallery-area 10px',
   targetY: 'gallery-area 10px',
   captionEval: 'this.a.title',
   [hilight]autoplay: true[/hilight]
 }

And remove it from the onclick.

Code: Select all

<a id="thumb1" class='highslide' href='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' [hilight]onclick="return hs.expand(this, inPageOptions)"[/hilight] title="EVGA 7800GTX"><img src='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' alt='EVGA 7800GTX'/></a>

2. The thumbstrip and controls arenÔÇÖt defined in highslide-full.js. You can define the addSlideshow like this if you donÔÇÖt want thumbstrip and controls:

Code: Select all

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: true,
	useControls: false
});

3. No, you canÔÇÖt make the images larger than their actual pixel size.

4. The images in the link (the anchor) are the visible images in the slideshow, so you canÔÇÖt remove them. But you can remove the img tag (<img src='inventory/gpu/nvidia/evga_7800gtx/SNV13272_ico.jpg' alt='EVGA 7800GTX'/>) when you are not using a thumbstrip for your gallery.

5. No, Highslide has no more transitions between the images available.

6. Highslide preloads the five first images by default. You can increase the number of images to preload ÔÇô see http://highslide.com/ref/hs.numberOfImagesToPreload

[BoT]

btw, am i on the right track or is there a much simpler way to do this

[BoT]

awesome roadrash, i appreciate your help very much and it's always good seeing you here.