How to Do a Clickable Slideshow on Main Page?

[hcd888]

Hi, iam trying to build a site like this http://www.styxonline.co.uk/index.asp What would be the best way to do it?

Looking at it i think i can use a modified classic template and the CSS Horizontal Drop Down Menu, but how would i make the horizonal menu like the example, without the dropdown?

Also how would i put the flash images on the main page? Would it be possible to have 3 different images like the example and when i click on the image it takes you to that category just like the example.

Please i would appreciate if somebody could give me some pointers

Thanks

[hcd888]

Iam quite a newbie, iam trying to build a site like this http://www.styxonline.co.uk/index.asp

so i was wondering using this mod would i be able to acheive this effect?

Would it be possible to have 3 different images like the example and when i click on the image it takes you to that category just like the example.

Hope somebody can help Thanks

[byoriginaldesign]

I don't see any reason this couldn't be done with a java app. To my knowledge there is no ZC mod that does something like this, but checkout http://www.javaboutique.com, and you'll most likely find an image slideshow app you can use to work with, then just copy the code into a table or div on your main page.

[mprough]

I would avoid a Java Script solution... Its not at all necessary anymore and the usability is poor.

Ajax or CSS are much faster, cleaner and more usable options.

http://sonspring.com/journal/hoverbox-image-gallery
http://www.w3schools.com/CSS/css_image_gallery.asp
http://www.w3cgallery.com/w3c-css/jq...image-carousel
http://www.andrewsellick.com/75/simp...using-mootools

~Melanie

[gjh42]

The site referenced appears to be using the Dynamic Drive fadeshow, though there is no identifying info on what they are using. It should have something like this:

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

[gjh42]

As far as I can tell, none of the referenced alternatives does what the original example does, a constantly fading in & out slideshow. It is used on another site of mine, and with a slow fade it is quite clickable.

[hcd888]

Hey gjh42 i was wondering if you have a link to the site you say is similar to the example site? Also how was it acheived thanks

[gjh42]

www.nyfaeriefest.com
Our graphic designer is used to building sites in HTML and flash, so he just pasted the javascript into define_main_page.php in Tools > Define Pages Editor. It works, but is not the best or "right" way to do it; I'm leaving it that way for now so he can easily access it to adjust the images.

The correct method is to save the javascript in a jscript_fadeshow.js file, in a location depending on where you want to use it. See the wiki article for more info: http://www.zen-cart.com/wiki/index.p...s_-_Javascript . This one would go in /includes/modules/pages/index/jscript_fadeshow.js .

Then it would be called in define_main_page.php like this

<!-- START IMAGE SLIDESHOW -->
<span id="slideshow">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 457, 403, 0, 3000, 1, 0)

</script>
</span>
<!-- END IMAGE SLIDESHOW --> 

[hcd888]

Thanks for getting back to me, i think i will also try the easy way & paste the javascript into define_main_page.php

[gjh42]

There's really nothing difficult about dropping a file with a .js extension into a certain folder. It makes define_main_page.php that much simpler.