PDA

View Full Version : Ultimate Fade-in slideshow (v1.5)



woody146
08-24-2006, 08:44 PM
1) Script Title: Ultimate Fade-in slideshow (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Having great problems with this script I need some help! I need to put the correct path in for the pictures to be displayed.
fadeimages[0]=["photo1.jpg", "", ""] //plain text syntax
Can someone show me the correct way of putting the path in for the photos please.

blm126
08-24-2006, 08:51 PM
fadeimages[0]=["http://www.somesite.com/any/valid/URI/here.jpg", "", ""] //plain text syntax

Does that help?

woody146
08-24-2006, 09:13 PM
fadeimages[0]=["http://www.somesite.com/any/valid/URI/here.jpg", "", ""] //plain text syntax

Does that help?


Thanks first bit is fine with the web site, not sure about this bit (any/valid/URI) then the last bit is the picture.

Thanks
Martin

jscheuer1
08-25-2006, 07:41 AM
If the image is in the same folder as the page:


fadeimages[0]=["photo1.jpg", "", ""]

If the image is in a folder called 'images' off of the page's folder:


fadeimages[0]=["images/photo1.jpg", "", ""]

If the image is in a folder called 'images' off of the root of the domain:


fadeimages[0]=["/images/photo1.jpg", "", ""]

hall2002
09-02-2006, 10:45 PM
i really need some help with this random fading image script, im using this script to display different banners, the script works like a dream but i cant add the image maps for the menu which is on the images. im using dreamweaver to edit this and when i go to the design page in dreamweaver all i see is an actionscript icon and not an image placeholder i really need this script to show a place holder so that i can add different hyperlinks to the images for the menu by drawing a rectangle map on the image, can some 1 help me with this as im new tothis and ive searched all over and cant find an answer. thanks in advance

jscheuer1
09-03-2006, 03:45 AM
To the best of my knowledge, you have hit a wall as far as the design capabilities of Dreamweaver go. What you need to do is use a text editor to edit your page and view your progress in the browser. That's just for starters. You will also need to change the code for the script so that it can render the image maps in place of simply rendering the images. The most likely places to do this would be by expanding the array (fadeimages) to include key data for the image map and in the populateslide function of the script to utilize this information from the array in rendering the image maps.

This would be a tall order even for an experienced javascript coder though.

hall2002
09-03-2006, 09:40 AM
how would i get the image maps on then???

could u give me a bit of code as an example so that i could try to sort this out, please i really need to be able to click on certain parts of my fading images:rolleyes:

blm126
09-03-2006, 03:28 PM
Do you require the fade effect? If not a much easier solution would be an iframe with a meta refresh. If you would like to try this I would happily provide you with more information.

jscheuer1
09-03-2006, 05:38 PM
Good idea blm126. That might be able to be used with a meta tag page transition effect so that it could fade in IE, at least.

I was thinking though that it might not really be so hard to do in the fade script. But, some testing would be required in any case. Since the only thing that makes an image tag into an image map is the usemap attribute, all the maps should be able to be on the page. Then, instead of passing an href to each image, as the slide show already can do, it would be the relatively simpler matter of passing them the usemap attribute.

hall2002 - do you have a few sample banners with image maps? If you could provide a link to a demo page with at least three sets of these (three banners each with its own image map), I will see what I can do.

jscheuer1
09-03-2006, 07:57 PM
Actually not as hard as I thought it might be. The script will no longer work with ordinary links as it did before. Here is a demo:

http://home.comcast.net/~jscheuer1/side/files/ufade_imap.htm

Use your browser's 'view source' to see the code.


Notes: The script has been altered and added to. Mouse events must be used with the maps as shown if the pausing feature is to be preserved for browsers other than IE. If you want an image to have a full image link, make an image map for it and have just one area shape rectangle cover the entire image.

woody146
09-03-2006, 08:55 PM
Hi I'm still having problems with this, may be it's me but I will not give up. I need to know the rite path for the photo's, I've tryed the ones you gave me and I just get the red cross in the corner. I'm using Fusion 8 Web building program can you help please before I go mad. thanks

Martin

jscheuer1
09-03-2006, 10:23 PM
Use a text editor to edit the script.

hall2002
09-03-2006, 10:57 PM
that works perfectly and is exactly what i was wanting, cant thank you enough.. cheers

hall2002
09-03-2006, 11:23 PM
found a bit of a problem....... sry....if i hold the mouse pointer on an image map after a about 10 seconds it takes away the link as if no image map is there, i think your deffinetly on the right track tho, is there any way of making it so the image map is alwaysthere and not reloading,i dont need to pause the random rotation, but need the image maps in place at all times???

try disabling the pause on mouseover and also putting your mouse over the image map n just leave it placeed over the image map and you will see what i mean...

this is the code that was almost perfect.... http://home.comcast.net/~jscheuer1/side/files/ufade_imap.htm

hall2002
09-04-2006, 01:01 AM
think i have sorted it, script below:

was like this b4 i edited it:

var fadeimages=new Array()
//SET IMAGE PATH and useMAP. Extend or contract array as needed
fadeimages[0]=["banner01.jpg", "#map1", "Map Title"]
fadeimages[1]=["banner02.jpg", "#map2",
fadeimages[2]=["banner03.jpg", "#map3",


what i edited it to make the map always stay on:

var fadeimages=new Array()
//SET IMAGE PATH and useMAP. Extend or contract array as needed
fadeimages[0]=["banner01.jpg", "#map1", "Map Title"]
fadeimages[1]=["banner02.jpg", "#map1",
fadeimages[2]=["banner03.jpg", "#map1",


----------------------------------------------------

the rest for the maps is still the same, u still call each map by its number ie: map1 - map2 - map3 and so on as it will still load all your other maps on every image and they will stay on all the time when the mouse is over them like this below:::


<MAP onmouseover=mapover(); onmouseout=mapout();
name=map1><AREA title=Google
shape=RECT target=_blank coords=0,0,40,40 href="http://www.google.com/"><AREA
title="Dynamic Drive Help Forum" shape=RECT target=_parent
coords=15,212,63,243 href="index.htm"><AREA
title="Map Title" shape=RECT coords=0,0,0,0></MAP>


<MAP onmouseover=mapover(); onmouseout=mapout();
name=map2><AREA title=Google shape=RECT target=_blank coords=55,16,95,56
href="http://www.google.com/"><AREA title="Dynamic Drive Help Forum"
shape=RECT target=_blank coords=51,146,91,186
href="http://www.dynamicdrive.com/forums"><AREA title="Map Title" shape=RECT
coords=0,0,0,0></MAP>


<MAP onmouseover=mapover(); onmouseout=mapout();
name=map3><AREA title=Google shape=RECT target=_blank coords=55,16,95,56
href="http://www.google.com/"><AREA title="Dynamic Drive Help Forum"
shape=RECT target=_blank coords=51,146,91,186
href="http://www.dynamicdrive.com/forums"><AREA title="Map Title" shape=RECT
coords=0,0,0,0></MAP>


---------------------------

but remember on the part where where u add ur images keep them all on #map1 even tho u have some maps called map2 and so on

var fadeimages=new Array()
//SET IMAGE PATH and useMAP. Extend or contract array as needed
fadeimages[0]=["banner01.jpg", "#map1", "Map Title"]
fadeimages[1]=["banner02.jpg", "#map1",
fadeimages[2]=["banner03.jpg", "#map1",


hope that this helps

rbarker
09-04-2006, 01:21 AM
Hey everyone!!

I want to display mulitiple slideshows ie 6

The script will only work for 2??


THIS IS WHAT I HAVE TRIED TO USE:

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): 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.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages3=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"


The different slides will be displayed on different areas of the page.

PLEASE HELP ME SOMEONE!
Thanks in advanced!
Ricardo

jscheuer1
09-04-2006, 01:22 AM
was like this b4 i edited it:

var fadeimages=new Array()
//SET IMAGE PATH and useMAP. Extend or contract array as needed
fadeimages[0]=["banner01.jpg", "#map1", "Map Title"]
fadeimages[1]=["banner02.jpg", "#map2",
fadeimages[2]=["banner03.jpg", "#map3",

No it wasn't, it was like this:


var fadeimages=new Array()
//SET IMAGE PATH and useMAP. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "#map1", "Map Title"] //image with imagemap syntax and IE map title
fadeimages[1]=["photo2.jpg", "#map2", ""] //image with imagemap syntax
fadeimages[2]=["photo3.jpg", "#map3", ""] //iimage with imagemap syntax

If you write it the way that you have it, the script will not work at all.

You can change it to all "#map1" if you want the same 'hot spots' for each image. The additional maps are to give you different 'hot spots' for each image. What you saw as 'the links disappearing', was actually the links changing location with each different image.

If you change them all to "#map1", you don't need the other maps on the page at all.

Notes: The "Map Title" (if desired) can be set for each map in the array for IE as shown for the first entry. All other browsers treat image maps differently so, the title for each map in those browsers is set in each map itself using its default area tag:


<map name="map3" onmouseover="mapover();" onmouseout="mapout();">
<area shape="rect" coords="55, 16, 95, 56" href="http://www.google.com" title="Google" target="_blank">
<area shape="rect" coords="51, 146, 91, 186" href="http://www.dynamicdrive.com/forums" title="Dynamic Drive Help Forum" target="_blank">
<area shape="default" nohref title="Map Title">
</map>


The title for a map is simply the default 'tool tip' that is displayed when the mouse is over the map and not over any 'hot spot'. Often, this is left blank.

hall2002
09-04-2006, 01:54 AM
the script works fine how ive edited it my feel free to test it at my website address, take a look at http://www.jbmixx.co.uk/a/


feel free to use the code on the page if u find it useful

jscheuer1
09-04-2006, 02:14 AM
Lookin' good! You might want to change the words "Map Title" to something more descriptive or leave it blank (use empty quotes "") in the array. For the map itself, it would be a good idea to use a closing </map> tag at the end of it.

hall2002
09-04-2006, 11:24 AM
got 1more silly question and its puzzling me now, onmy menu i have a link called radio... when you click this image map link i would like a popup window to open up so that the radio can play from within the popup window....

the image maps are like this at the moment but i need it altering so that a popup window can open from the radio link...


<AREA title="home" shape="RECT" target="_parent" coords="23,214,71,241" href="index.htm">
<AREA title="promotions" shape="RECT" target="_parent" coords="92,214,183,241" href="promotions.htm">
<AREA title="radio" shape="RECT" target="_parent" coords="204,214,251,241" href="radio">
<AREA title="forums" shape="RECT" target="_parent" coords="272,214,332,241" href="forums/">
<AREA title="gallery" shape="RECT" target="_parent" coords="353,214,412,245" href="gallery.htm">
<AREA title="star signs" shape="RECT" target="_parent" coords="432,214,490,245" href="starsigns.htm">
<AREA title="local news" shape="RECT" target="_parent" coords="511,214,596,241" href="localnews.htm">


any ideas how to make a popup window link from the radio imagemap??? also if you could could you make it so that when the popup window is open you cant open the same popup window again. thanks for all your help youve been great.

hall2002
09-04-2006, 01:42 PM
just a thought but if i targeted _blank so the window i needed opened in another window, is it possible to make some code to put on a certain page that would automatically resize the window and also disable the status and address bar.

this would make it appear to be a popup
-----------------

just re-edited this as ive searched all over and apparnetly you can only make popup windows disable status and address bar........

can sum 1 help me make the radio link on my banner open a popup window??????????

this is the script without the popup http://www.jbmixx.co.uk/a/

feel free to use the source code to assit you

jscheuer1 really need your experteese with this 1

jscheuer1
09-04-2006, 04:42 PM
The status bar is off limits these days due to security reasons. Locally in tests, it will not appear in some browsers but, with a live page it will appear in almost all. Also, disabling the address bar will trigger the appearance of the domain in the title bar or elsewhere (depending upon the browser). The title bar is likewise off limits.

All pop ups are subject to blocking and/or being forced into tabs or full sized windows or the current window - depending upon browser settings.

That being said, most browsers with default settings will cooperate in displaying a pop up like so from an area tag:


<area shape="rect" coords="51, 146, 91, 186" href="http://www.dynamicdrive.com/forums" title="Dynamic Drive Help Forum" target="mywin" onclick="thewin=window.open(this.href,this.target,'width=700, height=500, scrollbars=1, resizeable=1');thewin.focus();return false;">


Notes: Resizing a window and especially changing its chrome (status, address, scrolling, etc.) after creating it (whether you made it with javascript or by simply targeting the href) is even less reliable. If there is any chance that your content in the new window will overflow its dimensions (there almost always is unless its dimensions are very small and its content is an even smaller image, even then some PDA's and other hand helds will have trouble) - You should set the scrollbars=1 and the resizeable=1. You can also include a top= and left= to position the pop up, if desired.

hall2002
09-04-2006, 06:55 PM
hi thanks for having a look at it for me, the window pops up perfect, thank you very much for all your help