Web Analytics Made Easy -
StatCounter Image rotator help - CodingForum

Announcement

Collapse
No announcement yet.

Image rotator help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image rotator help

    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).

    I'd appreciate the help.

  • #2
    Would you like the rotator to show a different image every time the page is refreshed? or change every few seconds...minutes...ect.?

    Comment


    • #3
      Originally posted by itssawyer View Post
      Would you like the rotator to show a different image every time the page is refreshed? or change every few seconds...minutes...ect.?
      Hi mate, thanks for the reply.

      I want the image to change every few seconds, i'd like to have a slideshow of around 5-6 images.

      Comment


      • #4
        Please post the simplest rotator code you found, and I will show you how to make it work for your site.
        .My new Javascript tutorial site: http://reallifejs.com/
        .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
        .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

        Comment


        • #5
          Originally posted by venegal View Post
          Please post the simplest rotator code you found, and I will show you how to make it work for your site.
          Well...not simple per se

          It's here:

          http://iamacamera.org/sandbox/photoshuffler/

          Thanks for your help.

          Comment


          • #6
            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.
            Last edited by venegal; Apr 16, 2009, 06:55 AM.
            .My new Javascript tutorial site: http://reallifejs.com/
            .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
            .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

            Comment


            • #7
              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.

              Comment


              • #8
                Originally posted by venegal View Post
                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.

                Comment


                • #9
                  Here you go:

                  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:
                  Code:
                  <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();">
                  in the .js you change the folling variables
                  Code:
                    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.
                  .My new Javascript tutorial site: http://reallifejs.com/
                  .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                  .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

                  Comment


                  • #10
                    Thanks venegal.

                    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:

                    <!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">

                    var gblImg = new Array(
                    "<img src="assets/images/slide1.jpg" alt="Piazza San Marco" />",
                    "<img src="assets/images/slide2.jpg" alt="Ducale" />",
                    "<img src="assets/images/slide3.jpg" alt="Ducale" />"
                    <img src="assets/images/slide4.jpg" alt="Fiorenzato Logo" />
                    );
                    var gblPauseSeconds = 3.25;
                    var gblFadeSeconds = .85;
                    var gblRotations = 1;
                    </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>
                    Where've I gone wrong?

                    Comment


                    • #11
                      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.
                      .My new Javascript tutorial site: http://reallifejs.com/
                      .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                      .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

                      Comment


                      • #12
                        Thanks.

                        My .js now looks like this:

                        Code:
                          //
                          // CSS Photo Shuffler v1.0 by
                          //   Carl Camera
                          //   [url]http://iamacamera.org[/url] 
                          //
                          // SetOpacity Function and inpiration from Photo Fade by
                          //   Richard Rutter
                          //   [url]http://clagnut.com[/url]
                          //
                          // License: Creative Commons Attribution 2.5  License
                          //   [url]http://creativecommons.org/licenses/by/2.5/[/url]
                          //
                        
                          // 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; Apr 17, 2009, 09:46 AM.

                        Comment


                        • #13
                          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.
                          Last edited by venegal; Apr 17, 2009, 09:15 AM.
                          .My new Javascript tutorial site: http://reallifejs.com/
                          .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                          .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

                          Comment


                          • #14
                            Ok mate, i've uploaded the files to the site.

                            Comment


                            • #15
                              Unlike the code you posted, the onload of the body tag does not contain a call to photoShufflerLaunch();, so the script is never invoked.

                              Furthermore the image files you are referring to in gblImg (e.g. http://www.fiorenzato.co.uk/assets/images/slide1.jpg) do not exist.
                              .My new Javascript tutorial site: http://reallifejs.com/
                              .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                              .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

                              Comment

                              Working...
                              X