Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 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
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Would you like the rotator to show a different image every time the page is refreshed? or change every few seconds...minutes...ect.?

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Please post the simplest rotator code you found, and I will show you how to make it work for your site.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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; 04-16-2009 at 11:55 AM.

  • #7
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #9
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    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?

  • #11
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    grahamy84 (04-17-2009)

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Thanks.

    My .js now looks like this:

    Code:
      //
      // 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.

  • #13
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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; 04-17-2009 at 02:15 PM.

  • #14
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Ok mate, i've uploaded the files to the site.

  • #15
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •