Coverflow Image Gallery, change initial image

[nigelg]

1) Script Title: Coverflow Image Gallery

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...lowgallery.htm

3) Describe problem: Is it possible to have the gallery initially display an image other than the first in the list. For example the third of five. This would make the gallery look more balanced rather then starting with all the images to the right.

[ddadmin]

Sure, inside coverflow.js, add the line in red after the existing code block:

	$frame.sly({
		horizontal: 1,
		itemNav: 'forceCentered',
		smart: 1,
		activateMiddle: 1,
		activateOn: 'click',
		mouseDragging: 1,
		touchDragging: 1,
		releaseSwing: 1,
		startAt: 1,
		scrollBar: $wrap.find('.scrollbar'),
		scrollBy: 1,
		speed: 300,
		elasticBounds: 1,
		easing: 'swing',
		dragHandle: 1,
		dynamicHandle: 1,
		clickBar: 1,
		// Navigation buttons
		pagesBar: $wrap.find('.pages'),
		activatePageOn: 'click'
	})

	$frame.sly('toCenter')

Ref: https://github.com/darsain/sly/blob/...ocs/Methods.md

[nigelg]

Thanks very much, it works perfectly.

[apparelbook]

Hi I absolutely love this gallery, I was wondering if url links can be attached to the images instead of overlay and enlarged image option, just strictly when clicking on the image will take you to another page, possible?

[ddadmin]

Sure, try the below modified version of coverflow.js. Open the file and at the very bottom, change the URLs corresponding to each image to your own:

coverflowimages({
	coverid: 'coverflow1',
	images: [
						['angelinasmall.jpg', 'http://dynamicdrive.com'],
						['millasmall.jpg', 'http://dynamicdrive.com'],
						['josiesmall.jpg', 'http://dynamicdrive.com'],
						['haydensmall.jpg', 'http://dynamicdrive.com'],
						['ashleysmall.jpg', 'http://dynamicdrive.com'] // <-- no comma after last image
					] // <-- no comma after last option
})

[apparelbook]

THANK YOU for replying. I updated the code according to below, and yes it goes to the link correctly, but now does not allow to flip to next image when I click on the upcoming image, instead of of coming to the center to full view, it takes me to the attached link.

Is it possible to activate the url link ONLY to the featured image? so it still allows to click on upcoming image to allow it to come to the center for full view, then after it's in full view, click on the image to take to the url?

I know the dots at bottom can navigate, but it would be fantastic to allow the above!

Looking forward to hearing back!
Paola

PS. You can see my test page at http://apparelbook.net/slidetest.php

Sure, try the below modified version of coverflow.js. Open the file and at the very bottom, change the URLs corresponding to each image to your own:

coverflowimages({
	coverid: 'coverflow1',
	images: [
						['angelinasmall.jpg', 'http://dynamicdrive.com'],
						['millasmall.jpg', 'http://dynamicdrive.com'],
						['josiesmall.jpg', 'http://dynamicdrive.com'],
						['haydensmall.jpg', 'http://dynamicdrive.com'],
						['ashleysmall.jpg', 'http://dynamicdrive.com'] // <-- no comma after last image
					] // <-- no comma after last option
})

[ddadmin]

Apparelbook:
Ok sure, try the below modified .js file, which should restrict the activation of a link only on the currently featured image.

[apparelbook]

WOW Thank you so much, this is FANTASTIC, best image gallery ever!!!! You are amazing

Apparelbook:
Ok sure, try the below modified .js file, which should restrict the activation of a link only on the currently featured image.

[mlegg]

Is there a way to make the images responsive for this slideshow?

[styxlawyer]

I have just tried this script, as I was hoping to use it in the next edition, but I can't get it working as it does in the demo page. The thumbnails all appear correctly but when clicking on the centre one the full image opens on a new page instead of an overlay and the caption is missing. I've tried debugging in FireFox and Opera but can't see the problem. Any idea what I've done wrong?

Here's my test page with the CSS and JavaScript all in-line:

Link

Edited to add: Problem solved. I had a hybrid of two different versions of coverflow.js which stopped everything working. Unfortunately they had the same date/version number at the top! I reloaded the original and it all works now.

Edited to add even more: I've now dropped everything into my main page and it's stopped working, so there must be a conflict somewhere. The main page also has FadeSlideShow version 2.6 so that might be the problem.