PDA

View Full Version : Continuous Reel Slideshow



chadlexmorgan
08-11-2011, 02:42 AM
1) Script Title: Continuous Reel Slideshow

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

3) Describe problem: My issue is I am wanting to use an image map on the images in the reel. Is this possible? I only want a certain area to be clickable.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4./jquery.min.js"></script>
<link rel=stylesheet type="text/css" href="./acd.css">


<script src="reelslideshow.js" type="text/javascript">


/***********************************************
* Continuous Reel Slideshow- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">


var firstreel=new reelslideshow({

wrapperid: "myreel", //ID of blank DIV on page to house Slideshow

dimensions: [800, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["./ACD_pics/Folder_Invites.jpg",], //["image_path", "optional_link", "optional_target"]

["./ACD_pics/Elegant_Invites.jpg"],
["./ACD_pics/Bubbles_Invites.jpg"],
["./ACD_pics/Carnival_Invites.jpg"],
["./ACD_pics/Leaves_Invites.jpg"],
["./ACD_pics/Monogram_Invites.jpg"],
["./ACD_pics/Oxford_Invites.jpg"],
["./ACD_pics/Stripes_Invites.jpg"],
["./ACD_pics/Twigs_Invites.jpg"],
["./ACD_pics/Formal_Invites.jpg"],
["./ACD_pics/Back2Back_Invites.jpg"],
["./ACD_pics/Sunset_Invites.jpg"] //<--no trailing comma after very last image element!

],

displaymode: {
type:'manual', pause:2000, cycles:2, pauseonmouseover:true},

orientation: "v", //Valid values: "h" or "v"

persist: true, //remember last viewed slide and recall within same session?

slideduration: 300 //transition duration (milliseconds)

})


</script>
</head>
<body bgcolor="black">
<map name="Wed_Est">
<area shape="rect" coords="624,281,773,259" href="./index.html">
</map>
<p align="right"><a href="http://allcreationdesigns.com/index.html"><img src="./ACD_pics/ACDlogo.jpg" border="0"></a><br />marketing
solutions for small
business&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;</p>
<br /><br />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="td">&nbsp;&nbsp;custom wedding designs</td>
<td></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:50px;">
<tr>
<td><p>Browse our selection of custom wedding invitations below. Find something you Like? Let us Know! Already have a favorite design?

We can create almost any design in your specific wedding colors. Order the invitation alone or an entire set - save the dates, programs,

plase cards, thank you notes, and more.<br /><br />Pricing is competitive and based on quantity, - we're happy to give you a FREE estimate

for you specific needs!</p></td>
</tr>
</table></td>
<td valign="bottom"><img src="./ACD_pics/Wed_Quote.jpg" border="0" /><p><font color="#A5CE39">Save 20%</font> on your first order!

</p></td>
</tr>
<tr>
<td colspan="2"><img src="./ACD_pics/middlebar.jpg" width="100%" height="5"></td>
</tr>
<tr>
<td><div id="myreel"></div></td>
<td><a href="javascript:firstreel.navigate('back')" style="margin-right:300px;"><img src="./ACD_pics/up.png"

border="0" /></a>
<br /><br /><br /><br /><a href="javascript:firstreel.navigate('forth')"><img src="./ACD_pics/down.png" border="0"

/></a></td>

</tr>
<tr>
<td colspan="2"><img src="./ACD_pics/middlebar.jpg" width="100%" height="5"></td>
</tr>
<tr>
<td colspan="2"><p class="p5" align="center">Looking for something else? Great news - we can create almost and

desigh for you. Let us know what you have in mind! Already have a favorite design? We can create almost any

design in you specific wedding colors!<br /><a href="./contact.html">
<img src="./ACD_pics/contactus.jpg" border="0" /></a></p>
</tr>
</table>


<p align="center">
<a href="./publicity.html">publicity</a> &#124;
<a href="./graphicdesign.html">graphic design</a> &#124;
<a href="./press.html">press releases & editorials</a> &#124;
<a href="./present.html">reports & presentations</a> &#124;
<a href="./directmail.html">direct mail</a></p>

<p align="center">
<a href="./marketing.html">email marketing</a> &#124;
<a href="./branding.html">company branding</a> &#124;
<a href="./invits.html" style="color:#A5CE39">invitations</a> &#124;
<a href="./beforeafter.html">before & after</a> &#124;
<a href="./aboutus.html">contact & about us</a> &#124;
<a href="./creations.html">new creations</a> &#124;
<a href="./index.html">home</a></p>
</body>
</html>

vwphillips
08-12-2011, 04:39 PM
It would be difficult to modify that script.

I suggest you find a script which defines the images in the HTML(there are many out there) so you are able to define the image maps in the HTML

you could try http://www.vicsjavascripts.org.uk/StepCarouselV/StepCarouselV.htm