Thread: Viewing Images On Website

I would like to have an image on my website change with the thumbnails below it.... here is an example website that has this key feature http://www.diecastmodelcars.com/

Ive done web searchs and have found nothing pertaining to this feature.... any Help would be much apprecieted..

BTW here is the website where I'd like to use this feature:

http://www.exstazjianjsadian.com/graphix_1.html

Thank You,
Sadian

I don't get it ... the reference page you provided "enlarged" the thumbnails when clicked, and on your page, you've used a larger image as a pop-up, right?

You can have an enlarged view of thumbnails when clicked (and a progressive 'next image' tool) by using the LightBox feature within Blue Voda.
You'll find it available from the Toolbar as a command: INSERT > EXTRA > LIGHTBOX

You can see an example of how LightBox works visitng this page. Keep in mind you can make your thumbnails and larger views however small or large as you desire.

o so there is a setting for the light box for this key feature... let me look into it.

No I dont want it to open in a lightbox window, I would like the picture above the thumbs to change....

um am I getting this right?

hold on um sorry I didnt read all your post... blah im haveing a bad day

Yes ... and I see it now too. I merely assumed it was a Lightbox feature you were seeking rather than actually trying it ... my bad?

You'll be wanting a specialized script to do this, which you will paste into a BV HTML box ... similar to the ones seen here:
PHP Photo Album script v2.11

IMAGE GALLERIES & VIEWERS (which you can modify to present as you mentioned and "placed" on your page precisely, using BV Shapes to "conceal" aspects you wish hidden -- use "layers" to design the image area)

that Image Galleries & Viewers does it have a plugin for BlueVoda?

o btw thanx vasilli your getting me on the right track now :P

No plugin required (although Blue Voda will accept plugins) ... simply paste the codes into a BV HTML Box and Page HTML as directed.

still not quite what Im looking to do..check this page agian when you click on a thumbnail the picture above it changes without opening any type of window it stays in the same window

http://www.diecastmodelcars.com/

could they be useing an Iframe and just opening the thumbnal link in the iframe hmmmm .... ???

No ... lose the whole iFrame mentality: navigation does not work from framed page to Parent page, and the controls on these viewers rely on mouseover commands (clicked navigation).

If you don't find an "easy" script to use or can't figure out how to cleverly configure one to "fit" your page, do a simply Google "slideshow" or "image rotator" Search for a larger selection.

You might also try visiting the www.jalbum.net site and looking at what they offer (JAlbum is a free and super-easy "add" for VodaHost customers via the Fantastico! area in cPanel).

ok well thanx


I sent that diecast site an email asking how they did it... maybe I'll get lucky and their webmaster will asnwer the Q...


thanx everyone

Originally Posted by Sadian

I sent that diecast site an email asking how they did it... maybe I'll get lucky and their webmaster will asnwer the Q..

They are using a simple Mouseover Script, with preset image placment for rotation of larger images .... on the DynamicDrive.com site they are called "Tooltips" and many Slideshows are really nothing but the same.

HTML Code:

<img src="/image_resize.php?the_file=/images/diecast/91781-1.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-1.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-2.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-2.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-3.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-3.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-4.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-4.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-5.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-5.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-6.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-6.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-7.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-7.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car"><img src="/image_resize.php?the_file=/images/diecast/91781-8.jpg&width=64&height=47" width="64" height="47" onMouseOver="this.style.cursor='pointer'; this.style.cursor='hand'; return true;" onMouseOut="this.style.cursor='default'; return true;" onClick="document.getElementById('main_image').display='none'; document.getElementById('main_image').src='/images/diecast/91781-8.jpg'" alt="2006 Yellow & Black Chevrolet Camaro Diecast Model Car">

You just need to find the right script to display as you want it to, and then paste it into a BV HTML Box as usual!

man I wish there was a wizard in lightbox or BV Gallery I hate codeing... and the person i am teaching BV doesnt know a stich of code theres no way i can explain that to her after I set up templates...

*scap Idea*


goes with BV Gallery popup windows...


thanx

Originally Posted by Sadian

goes with BV Gallery popup windows...

The GALLERY and POP-UPs in Blue Voda are two different animals .... Gallery open as a "next page" requiring you to "Back" the browser, and Pop-Ups open a new, smaller Window over the Parent Window.

You would be better off using LightBox, in this case, as she can easily understand how to re-populate the image selection and doesn't have to worry about creating 'onclick' links or dealing with clumsy site navigation, IMO.
And, the LightBox effects are very Visitor "approved" and familiar, and still are rather slick. Appease the site owner and deliver to Visitors what they want/enjoy without having a nagging feeling you are somehow "compromising" ...

thier is a problem with lightbox with my flash headers... the flash header wants to stay on top of the lightbox or i would.... there's no doubt

Ahhhh! Well, THAT is the only reason I would suggest using an iFrame: frame your headers, and they will remain "layered" ..... at least if I am remebering correctly from my own experience..... and I would not use the traditional HTML iFrame at all: look into the PHP method, for PHP will actually embed itself (the code) into the page itself, and not remain "an element" upon the page.

Check out this Tip meant for globalizing Menus, but apply the same concept to your header. Will sure make it easier to update or change the header with one or two clicks later on (especially if you have to walk someone through it).

ill set up a page and show you... well that issue must had been resolved i think i will go with light box... thanx vassili i would had never known

http://www.exstazjianjsadian.com/graphix_2.html

Originally Posted by Sadian

... thanx Vasili i would had never known...

.... and on we go!