I would like to include an image rotator (for 5 or 6 images) on the following page (where the current image is situated): http://www.fiorenzato.co.uk/index.html
I have found various rotator codes online but i'm unsure where to insert them.
Would someone be kind enough to insert the code for me? I'm new to all of this.
I do not want a rotator where which you can control though (e.g. a one with stop button, pause button etc...I just want it to be automatic).
Well, it's pretty straightforward, download the .js and put it in the same folder as your index.html, then put <script src="photoshuffler.js" type="text/javascript"></script> in the head of your html to include it.
There is a detailed explanation in the .js itself, just read it and do what it says. Basically you will have to add id-tags to the <img> you want to rotate and the wrapping <div> and change a few variables in order to add the paths to the image files to be rotated and customize the rotating speed.
there is one i found that i used before that is more simple, but it does not have the transition. If youd like it, send me a pm and ill look it up for you.
Well, it's pretty straightforward, download the .js and put it in the same folder as your index.html, then put <link href="photoshuffler.js" rel="stylesheet" type="text/css" /> in the head of your html to include it.
There is a detailed explanation in the .js itself, just read it and do what it says. Basically you will have to add id-tags to the <img> you want to rotate and the wrapping <div> and change a few variables in order to add the paths to the image files to be rotated and customize the rotating speed.
You must appreciate that i'm quite new to this. Even reading the help I don't find it straight forward. I just thought someone would be able to help to insert the code for me.
load the .js into your .html by adding <script src="photoshuffler.js" type="text/javascript"></script> to the end of your <head>.
prepare your <img> and its wrapper for the script by giving them ids:
Code:
<a id="photodiv" href="piazza_san_marco_espresso.html"><img id="photoimg" height="300" width="400" src="assets/images/piazza_san_marco_4g.jpg" alt="Piazza San Marco 4 Group Lever Espresso Machine" class="imageright"/></a>
add photoShufflerLaunch(); to your body onload; it will look like this:
var gblImg = new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 1;
to whatever you please; they pretty much do what they say they do: the first one holds the paths to your image files, the second one the pause between transitions in seconds, the third one the duration of the fade animation, the third one the number of rotations through all your images.
I tried what you said but found it hard to interpret some of the steps as I am very very new to this.
This is what I ended up with:
Quote:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiorenzato UK Espresso Coffee Machines: North East</title>
<meta name="keywords" content="coffee north east, coffee middlesbrough, coffee newcastle, coffee sunderland, coffee yorkshire, espresso north east, expresso north east, espresso machine, espresso machines, espresso servicing, coffee beans, grinder, grinders, compak grinders, coffee supplies, espresso machine parts" />
<meta name="description" content="Fiorenzato UK take pride in supplying traditional, high quality espresso coffee machines and coffee beans to the hospitality industry in the North East and the rest of the UK." />
<div id="container">
<p class="header"><img src="assets/images/fiorenzato_image.jpg" width="949" height="150" alt="FiorenzatoUK" /></p>
<p class="Navigationcolumn"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','assets/images/home_bar_rollover.jpg',1)"><img src="assets/images/home_bar.jpg" alt="Home" name="home" width="99" height="38" border="0" id="home" /></a><a href="about_fiorenzato_uk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_us','','assets/images/about_us_bar_rollover.jpg',1)"><img src="assets/images/about_us_bar.jpg" alt="About Us" name="about_us" width="116" height="38" border="0" id="about_us" /></a><a href="ducale_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ducale','','assets/images/ducale_bar_rollover.jpg',1)"><img src="assets/images/ducale_bar.jpg" alt="Ducale" name="Ducale" width="106" height="38" border="0" id="Ducale" /></a><a href="piazza_san_marco_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('piazza_san_marco','','assets/images/piazza_san_marco_rollover.jpg',1)"><img src="assets/images/piazza_san_marco_bar.jpg" alt="Piazza San Marco" name="piazza_san_marco" width="182" height="38" border="0" id="piazza_san_marco" /></a><a href="bricoletta_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bricoletta','','assets/images/bricoletta_ber_rollover.jpg',1)"><img src="assets/images/bricoletta_bar.jpg" alt="Bricoletta" name="bricoletta" width="122" height="38" border="0" id="bricoletta" /></a><a href="compact_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Compact','','assets/images/compact_bar_rollover.jpg',1)"><img src="assets/images/compact_bar.jpg" alt="Compact" name="Compact" width="116" height="38" border="0" id="Compact" /></a><a href="contact_fiorenzato_uk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','assets/images/contact_us_rollover.jpg',1)"><img src="assets/images/contact_us_bar.jpg" alt="Contact us" name="contact_us" width="127" height="38" border="0" id="contact_us" /></a><a href="coffee_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','assets/images/news_bar_rollover.jpg',1)"><img src="assets/images/news_bar.jpg" alt="News" name="news" width="81" height="38" border="0" id="news" /></a></p>
<div class="Centrecolumn"><a id="photodiv" href="piazza_san_marco_espresso.html"><img id="photoimg" height="300" width="400" src="assets/images/piazza_san_marco_4g.jpg" alt="Piazza San Marco 4 Group Lever Espresso Machine" class="imageright"/></a>
<p><br />
Fiorenzato UK take pride in supplying traditional, high quality espresso coffee machines to the hospitality industry within the <a href="contact_fiorenzato_uk.html">North East</a> and the rest of the U.K. Made in Italy, the home of espresso, Fiorenzato espresso machines are exquisite in design and most importantly, they are reliable. </p>
<p><a href="about_fiorenzato_uk.html">At Fiorenzato UK</a> we believe that creating coffee is an art form, not a science. It is a simple process but a process which needs mastering all the same. </p>
<p>People tend to over-complicate espresso machines with fancy gimmicks and needless additions to try and create a 'bells and whistles' advantage. However in doing so, they only help move espresso making away from its very essence.</p>
<p>The Fiorenzato range helps to recreate the Italian coffee experience. The machines are uncomplicated, easy to maintain and consistently create <a href="the_perfect_espresso.html">great coffee</a>. Fiorenzato UK understand that quality matters and we are confident that our brand can live up to your expectations.</p>
<p>Fiorenzato UK offer <a href="coffee_news.html">Barista training</a> and have our very own <a href="fiorenzato_parts_workshop.html">parts and service workshop</a>.</p>
<p>Click on our <a href="testimonials.html">testimonials page</a> to read what others are saying about us.</p>
</div>
</p>
<p class="footercolumn"><img src="assets/images/new_showroom.jpg" width="949" height="150" class="footercolumn" /><br />
You've gone wrong with the variable customization part.
First of all, it's better to customize them where they are defined, and not overwrite them afterwards in your html, i.e. open the photoshuffler.js in an editor; right under all the commented out explanations you wil see the six customizable variables. Change them there.
Secondly, the way you tried to overwrite the variables doesn't work, because Javascript put inside a <script> tag that is given a src already is ignored. The way you did it, you would have to put the variables in its own <script> tag after embedding the photoshuffler.js. But please don't, alter the .js file instead. Changing the variables after the whole script has already run might not do you any good.
Then there are quite a few things off with your gblImg array:
You can't nest double quotes like "<img src="assets/images/slide1.jpg" alt="Piazza San Marco" />". As soon as the interpreter finds the second double quote, it thinks that's the end of the string and interprets the following as code, which doesn't make a lot of sense. If you find yourself in the need of nested quotes, use single quotes instead: "<img src='assets/images/slide1.jpg' alt='Piazza San Marco' />".
But you don't, because that's not the right form for that particular array. It expects URLs, not <img> tags, just use "assets/images/slide1.jpg".
And after the third image in the array definition you are missing the comma and the starting quotes of the fourth item.
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target <img /> with a <div>. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"assets/images/slide1.jpg",
"assets/images/slide2.jpg",
"assets/images/slide3.jpg",
"assets/images/slide4.jpg",
);
var gblPauseSeconds = 3.25;
var gblFadeSeconds = .85;
var gblRotations = 1;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
and my homepage looks like:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiorenzato UK Espresso Coffee Machines: North East</title>
<meta name="keywords" content="coffee north east, coffee middlesbrough, coffee newcastle, coffee sunderland, coffee yorkshire, espresso north east, expresso north east, espresso machine, espresso machines, espresso servicing, coffee beans, grinder, grinders, compak grinders, coffee supplies, espresso machine parts" />
<meta name="description" content="Fiorenzato UK take pride in supplying traditional, high quality espresso coffee machines and coffee beans to the hospitality industry in the North East and the rest of the UK." />
<style type="text/css" id="container">
<!--
#container {
padding: 5px;
width: 949px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
background-color: #B1B4AD;
line-height: 20px;
}
.header {
text-align: center;
padding: 0px;
height: 150px;
width: 949px;
margin-bottom: 0px;
background-repeat: no-repeat;
}
.Navigationcolumn {
padding: 0px;
float: none;
height: 38px;
width: 949px;
margin-bottom: 10px;
}
.Centrecolumn {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
width: 929px;
float: none;
padding: 10px;
}
.Centrecolumn p {margin: 0px 0px 30px 0px}
.imageright {
float: right;
border: thin none #000000;
padding-top: 1px;
padding-right: 15px;
padding-bottom: 1px;
padding-left: 1px;
margin-right: 0px;
}
.footercolumn {
width: 949px;
background-repeat: repeat;
float: none;
bottom: auto;
}
a:link {
color: #3391C4;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #3391C4;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="photoshuffler.js" type="text/javascript"></script>
</head>
<body onload="MM_preloadImages('assets/images/home_bar_rollover.jpg','assets/images/about_us_bar_rollover.jpg','assets/images/ducale_bar_rollover.jpg','assets/images/piazza_san_marco_rollover.jpg','assets/images/bricoletta_ber_rollover.jpg','assets/images/compact_bar_rollover.jpg','assets/images/contact_us_rollover.jpg','assets/images/news_bar_rollover.jpg');photoShufflerLaunch();">
<div id="container">
<p class="header"><img src="assets/images/fiorenzato_image.jpg" width="949" height="150" alt="FiorenzatoUK" /></p>
<p class="Navigationcolumn"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','assets/images/home_bar_rollover.jpg',1)"><img src="assets/images/home_bar.jpg" alt="Home" name="home" width="99" height="38" border="0" id="home" /></a><a href="about_fiorenzato_uk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_us','','assets/images/about_us_bar_rollover.jpg',1)"><img src="assets/images/about_us_bar.jpg" alt="About Us" name="about_us" width="116" height="38" border="0" id="about_us" /></a><a href="ducale_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ducale','','assets/images/ducale_bar_rollover.jpg',1)"><img src="assets/images/ducale_bar.jpg" alt="Ducale" name="Ducale" width="106" height="38" border="0" id="Ducale" /></a><a href="piazza_san_marco_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('piazza_san_marco','','assets/images/piazza_san_marco_rollover.jpg',1)"><img src="assets/images/piazza_san_marco_bar.jpg" alt="Piazza San Marco" name="piazza_san_marco" width="182" height="38" border="0" id="piazza_san_marco" /></a><a href="bricoletta_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bricoletta','','assets/images/bricoletta_ber_rollover.jpg',1)"><img src="assets/images/bricoletta_bar.jpg" alt="Bricoletta" name="bricoletta" width="122" height="38" border="0" id="bricoletta" /></a><a href="compact_espresso.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Compact','','assets/images/compact_bar_rollover.jpg',1)"><img src="assets/images/compact_bar.jpg" alt="Compact" name="Compact" width="116" height="38" border="0" id="Compact" /></a><a href="contact_fiorenzato_uk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','assets/images/contact_us_rollover.jpg',1)"><img src="assets/images/contact_us_bar.jpg" alt="Contact us" name="contact_us" width="127" height="38" border="0" id="contact_us" /></a><a href="coffee_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','assets/images/news_bar_rollover.jpg',1)"><img src="assets/images/news_bar.jpg" alt="News" name="news" width="81" height="38" border="0" id="news" /></a></p>
<div class="Centrecolumn"><a id="photodiv" href="piazza_san_marco_espresso.html"><img id="photoimg" height="300" width="400" src="assets/images/piazza_san_marco_4g.jpg" alt="Piazza San Marco 4 Group Lever Espresso Machine" class="imageright"/></a>
<p><br />
Fiorenzato UK take pride in supplying traditional, high quality espresso coffee machines to the hospitality industry within the <a href="contact_fiorenzato_uk.html">North East</a> and the rest of the U.K. Made in Italy, the home of espresso, Fiorenzato espresso machines are exquisite in design and most importantly, they are reliable. </p>
<p><a href="about_fiorenzato_uk.html">At Fiorenzato UK</a> we believe that creating coffee is an art form, not a science. It is a simple process but a process which needs mastering all the same. </p>
<p>People tend to over-complicate espresso machines with fancy gimmicks and needless additions to try and create a 'bells and whistles' advantage. However in doing so, they only help move espresso making away from its very essence.</p>
<p>The Fiorenzato range helps to recreate the Italian coffee experience. The machines are uncomplicated, easy to maintain and consistently create <a href="the_perfect_espresso.html">great coffee</a>. Fiorenzato UK understand that quality matters and we are confident that our brand can live up to your expectations.</p>
<p>Fiorenzato UK offer <a href="coffee_news.html">Barista training</a> and have our very own <a href="fiorenzato_parts_workshop.html">parts and service workshop</a>.</p>
<p>Click on our <a href="testimonials.html">testimonials page</a> to read what others are saying about us.</p>
</div>
</p>
<p class="footercolumn"><img src="assets/images/new_showroom.jpg" width="949" height="150" class="footercolumn" /><br />
</p>
</p>
<div align="center">Home | <a href="about_fiorenzato_uk.html">About Us</a> | <a href="ducale_espresso.html">Ducale</a> | <a href="piazza_san_marco_espresso.html">Piazza San Marco</a> | <a href="compact_espresso.html">Compact</a> | <a href="bricoletta_espresso.html">Bricoletta</a> | <a href="contact_fiorenzato_uk.html">Contact Us</a> | <a href="coffee_news.html">News</a> | <a href="the_perfect_espresso.html">The Recipe</a> | <a href="testimonials.html">Testimonials</a> | <a href="fiorenzato_parts_workshop.html">Workshop</a></div>
</div>
</body>
</html>
However, it is still not working after testing it. Where am I going wrong now?
Last edited by grahamy84; 04-17-2009 at 02:46 PM..
Well it looks about right. Could you please upload your changes to your site (or a copy of your site), so I can have a look at it more directly? It would help in finding out what's wrong -- maybe you have a different directory structure in your local test environment or the image files are missing there?
Oh, and please use code tags instead of quote tags when posting code to this site.
Before you post, read our: 
