PDA

View Full Version : Front page slideshow


paul
26-09-2007, 14:01
I would like to create a slideshow of images just like the one displayed on the bluepark front page.

Am I right in thinking I need to add a .fla file in the front 'Page Editor'? This all seems a bit simple compared with my last ecommerce site!

If this is the case how can I determine the necessary dimensions to fit the existing width/space? Are there any other pitfalls?

Thanks.
Rich
26-09-2007, 18:59
Actually, the slideshow was put together using JavaScript, fading between a set of images. I won't lie, it took a number of hours to get it right - including the time taken to create the images etc. It's the kind of job that should only be attempted if you have at least a basic-to-moderate understanding of JavaScript, and a working familiarity with PhotoShop etc.

I didn't write the JavaScript function myself, however. It's an open source piece of code. I can't remember exactly where I found it, but I sourced it on Google by searching for "JavaScript fade" etc. It's also always important to find "cross-browser" code, as it needs to work with Firefox, Safari etc. I remember having to tweak the code slightly to make it do exactly what I wanted it to do.

This is where the Optional Code box comes in, by the way - JavaScript has virtually unlimited uses, and the Optional Code box is used to include JavaScript on various pages. All it does is place the code in the <HEAD></HEAD> section on the HTML page.

This effect could have been accomplished using Flash, but I like to try and avoid Flash wherever possible. Even though the majority of Internet users have Flash installed, it is still an install. I don't want the first thing new users see to be a message stating: "Flash is required to view this site"! :eek:
paul
27-09-2007, 23:43
i now understand how the developer section works after playing with some javascript code yesterday. are you willing to post the code you are using - as you said it was open source? ;) i can then place in the head/onload and html body sections and change references to images, etc.

thanks
paul
28-09-2007, 00:51
sorry, you can scratch this is as ive reread you've modified it - maybe beyond reasonable use?
Rich
28-09-2007, 07:28
I've tracked down the original script I used, here it is:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

:D
paul
28-09-2007, 09:45
Thanks, Richard. Looks a very useful site as well.
paul
02-10-2007, 09:21
I know my template width is 780px and the left column is 170px - because it says so in my template editor. Is it such a leap of faith to assume an image width of 610px will fit on the centre column? Or perhaps it should be 605px to ensure it fits?

Thanks,
Paul.
Rich
02-10-2007, 10:20
What I would always do in this situation is take a screenshot of the page in question and send it to my favourite graphics package (Photoshop). You can take a screenshot of any page by hitting the "Prt Sc" (Print Screen) button on your keyboard which writes the image to your clipboard.

Then simply open up your graphics package and paste in the new image. Use the selection tool to select the area you're wanting to insert the image into. If you copy the selection and attempt to create a new image using it, it will let you know the dimensions of the selection. That's why the slideshow on the front of this site is "pixel perfect" when it comes to sizing. :)

Personally, I have to admit that I'm a perfectionist when it comes to this sort of thing. I like things to be "just so". I think it's worth going to these kinds of lengths to make sure that the page is as tidy and professional as possible.
paul
02-10-2007, 12:53
thanks for another tip.

And i agree, i think with regard to the look of a site, whilst small design points may not register with the customer consciously (ie they dont say, "ooh, look at that border"!) they do leave a subliminal impression good or bad. and personally id rather leave a good impression.;)