A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

With the use of transparent PNG's, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I've used images with a width of 1500px, just to cover most of the currently used screen resolutions.

  

Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, comments are left on the source code to explain what it does.

The idea

To understand what we need to make, I created a simple reference image. The two containers will get the background images set through jQuery and will be placed on top of each other when another image is loaded. We can fade the top container out to slowly show the container behind it.

Now that we truly know what we need to create, we can start coding!

HTML

First things first: I'm normally not a big fan of empty HTML elements which only purpuse is to be a handle for JavaScript. I'd rather let JavaScript dynamically create the element, just to keep the HTML clean (for SEO purposes for example). But in this example, I'm aiming at how to create this instead of what the best way is to create it.

Having said that, this is the HTML I came up with. Take note I left some parts out, but you can find them when downloading the source.

 
<div id="header">
 
   <!-- jQuery handles to place the header background images -->
   <div id="headerimgs">
      <div id="headerimg1" class="headerimg"></div>
      <div id="headerimg2" class="headerimg"></div>
   </div>
 
   <!-- Top navigation on top of the images -->
   <div id="nav-outer">
      <div id="navigation">
         <!-- Stuff in the navigation bar goes here -->
      </div>
   </div>
 
   <!-- Slideshow controls -->
   <div id="headernav-outer">
      <div id="headernav">
         <div id="back" class="btn"></div>
         <div id="control" class="btn"></div>
         <div id="next" class="btn"></div>
      </div>
   </div>
 
   <!-- jQuery handles for the text displayed on top of the images -->
   <div id="headertxt">
      <p class="caption">
         <span id="firstline"></span>
         <a href="#" id="secondline"></a>
      </p>
      <p class="pictured">
         Pictured:
         <a href="#" id="pictureduri"></a>
      </p>
   </div>
  
</div>

As you can see, we already created all the elements we expected to create when looking at the reference image. Take note of headerimg1 and headerimg2 which are the containers for the background images. The headernav contains three buttons that we use to control the slideshow. We also created some different handles for jQuery to easily manipulate the DOM, like firstline and secondline for the text.

This HTML is what we're going to use as the backbone of our webpage. Now on to add some design using CSS!

CSS

Like I said at the beginning of this article: The CSS in this example is pretty nifty. Therefor, I'll break it up in several parts for make some things more clear. Take note I don't sum up all the CSS properties; Just the important ones.

 
.headerimg { background-position: center top; background-repeat: no-repeat; position:absolute; }

This is actually the key to achieving this effect. Each headerimg has a background image (set by jQuery) which will be positioned on the center on top of the screen. By setting the no-repeat value, we only display it once. The position is set to absolute in order to place both the handles on top of each other.

 
#nav-outer { height:110px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }

The navigation is set to a fixed height. The position is set to relative, so we can position it using the top property. The background-image is a transparent blue PNG, just for the nice effect it'll have. We could use the RGBA property here instead of the image, but that only works in CSS3 compatible browsers.

 
#firstline { background-image:url("../images/textbg.png"); float:left; display:block; }
#secondline { background-image:url("../images/textbg.png"); float:left; display:block; clear:both; }

Both the text lines have a transparent background image (white). By setting the display to block, we can use float:left to make them position next to eachother. I know you could better use one generic class to apply to both the elements, but since we already needed the two handles for jQuery in the HTML, I used this instead.

 
.btn { height:32px; width:32px; float:left; cursor:pointer; }
#back { background-image:url("../images/btn_back.png"); }
#next { background-image:url("../images/btn_next.png"); }
#control { background-image:url("../images/btn_pause.png"); }

The button controls are pretty easy to understand. The generic .btn class provides a width and height and the proper cursor. Each element has a different icon which the user will see to navigate through the images.

That covers most of the important CSS. On to the most interesting part: jQuery.

jQuery

Since we need to load all the images and text dynamically, we need a variable to store all the information. We create an array filled with objects that contains all the information we need like this:

 
var photos = [ {
      "title" : "Title 1",
      "image" : "SourceImage1.jpg",
      "url" : "http://www.url.1",
      "firstline" : "First line 1",
      "secondline" : "Second line 1"
   }, {
      "title" : "Title 2",
      "image" : "SourceImage2.jpg",
      "url" : "http://www.url.2",
      "firstline" : "First line 2",
      "secondline" : "Second line 2"
   }
   // More pictures if we want
];
 
var slideshowSpeed = 6000;

The title will be used at the "Pictured" text. The image is the background image we need and the url will be used twice (once at the second line text and once in the "Pictured" text). The firstline and secondline are self-explanatory.

The slideshowSpeed variable is what we use for the speed (in milliseconds) for the slideshow to display images once the autoplayback functionality is active. Now let's first take a look at the button controls.

 
// Backwards navigation
$("#back").click(function() {
   stopAnimation();
   navigate("back");
});
  
// Forward navigation
$("#next").click(function() {
   stopAnimation();
   navigate("next");
});
  
var interval;
$("#control").toggle(function(){
   stopAnimation();
}, function() {
   // Change the background image to "pause"
   $(this).css({ "background-image" : "url(images/btn_pause.png)" });
     
   // Show the next image
   navigate("next");
     
   // Start playing the animation
   interval = setInterval(function() {
      navigate("next");
   }, slideshowSpeed);
});

As you might notice, we're calling sevaral functions here that need to be created: stopAnimation() and navigate(direction). We use the setInterval() method from JavaScript to create a loop to change the images. We stop the animation when the user starts using the next and back button (and the pause button ofcourse). Let's take a look at that stopAnimation() function.

 
var stopAnimation = function() {
   // Change the background image to "play"
   $("#control").css({ "background-image" : "url(images/btn_play.png)" });
     
   // Clear the interval
   clearInterval(interval);
};

This is a pretty basic function. We clear the interval by calling clearInterval to stop the animation loop. Now, for the more interesting function: navigate(direction).

 
var activeContainer = 1;  
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
 
   // Check if no animation is running. If it is, prevent the action
   if(animating) {
      return;
   }
  
   // Check which current image we need to show
   if(direction == "next") {
      currentImg++;
      if(currentImg == photos.length + 1) {
         currentImg = 1;
      }
   } else {
      currentImg--;
      if(currentImg == 0) {
         currentImg = photos.length;
      }
   }
  
   // Check which container we need to use
   var currentContainer = activeContainer;
   if(activeContainer == 1) {
      activeContainer = 2;
   } else {
      activeContainer = 1;
   }
  
   showImage(photos[currentImg - 1], currentContainer, activeContainer);
  
};

This function only checks what stuff to make active (like selecting the correct container and image) and passes is on to the showImage() function. Let's take a look at how that one works.

 
var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
    animating = true;
   
    // Make sure the new container is always on the background
    currentZindex--;
       
    // Set the background image of the new active container
    $("#headerimg" + activeContainer).css({
        "background-image" : "url(images/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });
       
    // Hide the header text
    $("#headertxt").css({"display" : "none"});
       
    // Set the new header text
    $("#firstline").html(photoObject.firstline);
    $("#secondline")
        .attr("href", photoObject.url)
        .html(photoObject.secondline);
    $("#pictureduri")
        .attr("href", photoObject.url)
        .html(photoObject.title);
       
    // Fade out the current container
    // and display the header text when animation is complete
    $("#headerimg" + currentContainer).fadeOut(function() {
        setTimeout(function() {
            $("#headertxt").css({"display" : "block"});
            animating = false;
        }, 500);
    });
};

As you can see, it uses the variables to set everything in the correct way. Placing the correct image on top of the other one, hiding the text, setting the new text and displaying it after the fadeOut is complete. Take note of the animating variable we set, so the user can't navigate when the animation is playing.

And that's about it! This is one way to create a beautiful large background image slideshow.

Conclusion and Download

For some final touches, I added some content in the navigation part of the page. I really like the way how this technique looks and I see this could be used in loads of websites. You could improve the script by preloading the images, so the animation will be smoother for first-time visitors. Also, you could dynamically add the HTML elements to the DOM using jQuery to keep your HTML clean. Other than that, I think this is a great way to display big background images on any website.

  

What do you think? Do you see where you could improve the script? Or do you want to use it in your next project? Feel free to share!

UPDATE: 7th April 2011

Sylvain Papet from Com-Ocean converted my script to a plugin.

Here are the changes to the script:

• I rename a lot of things, especially html id because there name are too common and there can be some conflict (I had some)
• HTML is writen by the plugin just after body tag and can be customize
• There is also an option to specify delay time between pictures
• I remove first and second line text, there is only title and link
• I remove hide and display of text block. I found this is more pretty that this block do not "blink"
• Some method can be called externaly (api) like navigate, startSlideshow, stopSlideshow. I don't test it
• I add an internal preload feature in order to load images before being displayed (which cause a white background for about a second)

Download the plugin

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• Generating the pixellogo from TechCrunch in HTML
• Animated fullscreen background image slideshow
• jQuery Quickie: Smooth animated quote display
• jPong - 3d pong created with jQuery

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Richie - Size does matter   2010-04-06 08:34:49 One of the most beautiful image sliders I have ever seen. Since it covers the entire width of the page, it gives a very professional look and the buttons are quite the perfect match as well. Great work, Marco. Reply | Quote

Umut Muhaddisoglu   2010-04-06 08:42:16 Marco, This looks awesome, great job. Reply | Quote

moabi - hi there   2010-04-06 08:47:07 like it, it's nice because of the full width, though a little fade effect would be really nice to make the transitions (or other effect, we know you're good at exploring jquery !) keep us the good work ! thx Reply | Quote

Marco - It does fade!   2010-04-06 12:20:48 Hi Moabi! First, thanks for your comment! The images do fade into each other, but because the images aren't preloaded, you don't see that effect. One you've seen all the images (and they're in the browser cache), you'll see the fade effect in it's full glory . Reply | Quote

Anonymous - help!   2011-02-15 16:59:25 hello! im pretty new in webdesign, and i dont understad the jQuery pretty much. could you help me on adding the preloader plugin? tutorials i have seen on the net only gets me more confused!!! thx in advance Reply | Quote

Sid   2010-04-06 14:10:27 Cool solution Marco I found a different method, here is a demo http://clienti.sid05.com/turis2010 Reply | Quote

Jose Gonzalez - Web designer   2010-11-23 21:51:41 Hey, i was wondering how were you able to do that. Plus that's a pretty sick dropdown menu. How was this done. Do you have a tutorial? Reply | Quote

Venu Ananda   2011-06-29 13:27:55 Loved the background effect, & the drop-down menu's fab too. You have a tutorial where I can check it out in detail? Reply | Quote

Venu Ananda   2011-06-29 13:34:18 Hi, tried your slideshow for a client. They simply loved it! http://www.v2techindia.co.in/omega Thanks a bunch! Reply | Quote

Alex Flueras - SW   2010-04-06 17:16:03 Simply superb. Thanks so much for sharing. Reply | Quote

Glenn   2010-04-06 17:50:22 So how does this handle loading of the images? Say I want to rotate 50 different images, is the script going to try download them all at once or just as needed? I would love to see an update to this article showing the preloading of the images, but only preload a couple at a time since the images are very large. Thanks for the article. Reply | Quote

Marco - Cleaver thinking!   2010-04-11 08:50:50 Very clever thinking Glenn - I didn't thought about that. You could easily preload all the images, but when you have 50 of them, that would be hard (and bandwidth consuming). You could alter the "navigate" to preload the upcoming image, so it'll be easily retrieved once it's needed the next time (the time when the image is actually needed). Thanks for this great input! Reply | Quote

Glenn   2010-04-15 17:45:19 What do think about modifying this script to generate all html with jquery? That way it would degrade gracefully on devices and browsers that don't support javascript. I was thinking the only div in the document should be and everything else should be inserted with jquery. Also, do you have any plans on updating this script based on the comments of this page? Just curious. Reply | Quote

Marco - Don't know   2010-04-19 07:36:49 Yup - like I said in the article too, I'm not a big fan of empty HTML elements, just to be used as "handles" for jQuery. I did create it that way, just for the purpose to create an easier to understand tutorial. You could easily place all the images on top of each other using CSS, so the top image would only be displayed when no JavaScript is enabled. Using jQuery, you could dynamically create the full gallery. Anyway, I normally don't update any "old" scripts, simply because I don't have the time and prefer to come up with new ideas instead of changing the old ones. I hope you understand! Reply | Quote

Andy Sowards   2010-04-06 18:20:28 Really nice slideshow script - I will have to try it out! Thanks! Reply | Quote

Abi   2010-04-06 19:03:42 Thanks- this is exactly what I was looking for! Reply | Quote

suhni california - auto resize to window   2010-04-06 19:12:44 http://www.buildinternet.com/project/supersized/ this one resizes to fit browser window Reply | Quote

Don   2010-04-07 02:10:55 Excellent work! Thanks heaps. Reply | Quote

Kawsar Ali   2010-04-07 04:17:10 Great Slideshow Marco. Keep up the amazing work. Cheers mate Reply | Quote

Martin   2010-04-07 16:58:07 Looks really clean. All the little details add up beautifully. Great work! Reply | Quote

Federico Pian   2010-04-07 17:18:35 Great work! is there any fix for preloading images? i think it's not a good impact for a visitor showing the slideshow not work perfectly Reply | Quote

Marco - Google is your friend   2010-04-07 19:33:54 Hi Federico! Thanks for your comment. You're totally right about the impact, but I didn't want to waste my time to write the image preloader, since there are loads of solutions that you can find on the web. Google "jQuery Image Preload" and you're ready to go! Good luck! Reply | Quote

Federico Pian   2010-04-08 00:16:35 Ok thanx very much i will try to fix the problem and maybe write a solution on my blog Reply | Quote

lesemu   2010-04-08 01:08:12 NICE!!! Really looking forward to putting this to good use. Great work. Reply | Quote

rudy - song operated   2010-04-08 01:18:49 I have one that's similar, using the nivo slider and wordpress @ songoperated.com It was a pain in the ass to get it just right. Reply | Quote

Jeremy   2010-04-08 03:02:22 Too many empty s in the markup, no? Reply | Quote

Jeremy   2010-04-08 03:02:38 Sorry, that says divs. Too many empty divs. Reply | Quote

Marco - True   2010-04-11 08:55:26 Yup, that's true. In the "HTML" part of this tutorial I explain that I'm note a huge fan of utilizing empty DIV's just for jQuery handles, but in this example it was just to make things clear. Reply | Quote

Ivan Lazarevic   2010-04-08 10:45:46 It would be nice if text appearance have fading effect, too. Reply | Quote

Marco   2010-04-11 08:56:47 Personally, I really like the "disappear" and "reappear" effects from the text. If the text would fade too, it would look more like one big image (including the text). Still, you could easily make the fade effect applied to the text too . Reply | Quote

Joshua   2010-09-29 01:43:45 How would one go about making the txt fade with the background image? Reply | Quote

Andy   2012-04-27 22:43:16 were you able to figure this out? Reply | Quote

Andy   2012-05-02 16:21:33 $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".fadeIn("slow"; animating = false; }, 500); }); Reply | Quote

sid   2013-04-19 03:15:40 wow!! thanx bro... thanx for that fadein effect Reply | Quote

Patrick   2010-04-09 08:08:33 Great work Marco, thank you for taking the time to make this tutorial. I'm implementing it right now in my new website. Cheers !! Reply | Quote

Marco - Good!   2010-04-11 08:57:15 Glad you liked it Patrick - hope I helped you enough to use it on your website! Good luck! Reply | Quote

Felipe - Keyboard navigation ?   2010-04-11 06:42:17 Adding controls (prev, stop and next) on slideshows is rarely explained (and rarely done) so congratulations for that ! Though theses controls are div elements and as such won't receive focus. Alas, those that use only the tab key to navigate are also more likely to need to stop the slideshow. Using the tabindex attribute is likely to be a PITA but these controls could as well be plain links created (they don't have to exist when JS is disabled) and managed with jQuery. Reply | Quote

Marco - You're right!   2010-04-11 08:59:40 You're absolutely right Felipe! Plain links would be better indeed (especially when thinking about keyboard navigation). By catching the "click" event in jQuery and preventing the default behavior, the same kind of effect can be recreated, but the tab focus would work. Thanks a lot for your comment and thinking with me here! Reply | Quote

Kevin - Wonderful tutorial   2010-04-19 15:26:37 Your post is very helpful to me,Thanks a lot. Reply | Quote

Mashkovtsev - clideshow   2010-04-19 20:54:59 Beautifull slideshow... i love it))) Reply | Quote

5-Squared - Awesome   2010-04-20 00:11:59 Really great stuff here. Definitely bookmarking this one for some future work. Thanks a lot for sharing. Reply | Quote

atiya - Problem!   2010-04-24 12:58:29 source file is corrupt i cant download it. Reply | Quote

Marco - Try again   2010-04-26 16:51:00 Try downloading it again, it might be corrupted while downloading. It seems to be working fine over here! Reply | Quote

Sido - Random   2010-04-29 16:26:45 Is it possible to get the images displayed randomly? Reply | Quote

Marco - Yup!   2010-05-01 08:30:21 Yup - you'll just have to shuffle the images array that we build, and you're ready to go! Reply | Quote

lulu2312   2010-12-31 15:15:58 hello, i'm also very interessted in doing this ! more infos would be really nice Reply | Quote

simon - re:   2011-03-09 13:48:24 lulu2312 wrote: hello, i'm also very interessted in doing this ! more infos would be really nice me too! Reply | Quote

andre   2012-06-27 14:41:34 to start ramdom alter "var currentImg =0;" to "var currentImg = Math.floor((Math.random()*11));" * 11 is number images + 1. Reply | Quote

Javier - Designer   2010-05-21 20:03:07 Hello, find your tutorial very useful but I'm having trouble setting up a background image to rotate simultaneously in the background since you are setting the z-index to -1 the background appears in front of the images, can you show me how to change that? Reply | Quote

Matthew - Firefox issues   2010-06-07 13:36:54 Hi, Really love this - thanks for posting! I have noticed though in Firefox v.2 the images do not display in the demo but does work on the Philadelphia website. It performs perfectly in FF3. Reply | Quote

Maggy - Solution   2011-03-04 17:59:30 Unable to background images on Firefox 2, solution? Reply | Quote

Gridfox - Random Array   2010-06-08 11:06:01 This is really neat, love the html text over the images and the navigation. Any idea how to make the images display at random? You mentioned shuffling the images array above, how would this be done? any help appreciated Reply | Quote

Cody - Images Showing   2010-06-15 19:49:36 Any reason why the next image in line flickers below the current image when the transition is happening. I can't get it to go behind everything so that next image doesn't show up at all. Reply | Quote

peachepé   2010-06-15 22:04:06 I integrated a prealoder for this slideshow, email me if you would like to have it. Reply | Quote

Mart   2010-06-24 09:02:30 Yes please, it would be most helpful. What's your email? Reply | Quote

Bret - Preloader, please.   2010-07-06 03:08:53 I would be interested to see how you incorporated a preloader as well. Please share if you can. Thanks! Reply | Quote

hrayr   2010-08-24 04:18:39 hello, can I see the preloader you did for this slidehsow?thank you Reply | Quote

Scott - Preloader   2010-11-09 21:45:16 I would love to check out a pre-loader for this...many thank yous... Reply | Quote

Clint - Jquery image background   2011-03-08 03:14:15 Hey, I know it has been a while since your post but i was just wondering if you still have the preloaded version of the jquery background image changer. Let me know, it would be much appreciated. Cheers Clint Reply | Quote

lawoman   2011-07-27 21:07:20 Can yu send me the preloader for this? Reply | Quote

massive - Preloader   2011-10-17 14:07:36 Hi there i was wondering if you still have the preloader. I am very interested to see how you implemented it. Thanks Reply | Quote

ma website design   2010-06-21 19:47:15 Am I mistaken or is this just for the front-end of developing? I wish there were great back-end widgets Reply | Quote

Dave Q - flickr integration   2010-06-24 10:11:03 Wondering if anyone has integrated this with Flickr API or RSS? how do you edit the script.js to get photos from Flickr? Reply | Quote

Dani - HTML   2010-06-27 11:40:05 Hello, Congratulations for your design! My question is: Is there templete for this site? I wanna make extra pages to this site and I don't know how to conservate the design. Thank you! Reply | Quote

Sean   2010-06-29 21:29:38 First off, thanks for the background slideshow. But, I noticed if the viewport ever creates a horizontal scroll (from elements outside of the slideshow), the slideshow stays static to the page when horizontally scrolled, creating a gap between where the image was cut off and where the page is scrolled to. Any idea how to fix this? Reply | Quote

Sean   2010-06-30 13:39:29 I may have found the answer to my question... just had to apply a 'min-width' to the slideshow container (though not IE6 friendly). Reply | Quote

Farhan - Thanks   2010-07-02 04:02:25 Thanks a lot for this sharing Reply | Quote

lily   2010-07-30 13:57:41 Great! Are you planning to add a feature like thumbnails-buttons? When click on first button - show first image etc. It will be awesome!!! Reply | Quote

felipe   2010-08-05 13:36:30 Hi Marco! thx for the script, it's working really good so far, much better than supersized, for my purpose. The only thing, is that I just can't make the pics to go random, and I've tried different ways. Could you please explain with some detail how can we do this? Please mate, thx. Reply | Quote

Anoop D - Nice Tutorial   2010-08-31 13:23:11 Hi Marco, That was a great tutorial .. i tried it in a wordpress theme .. but it is not working ... i dont know why .. the backgrounds are given in the css in the format background-image:url(./images/imagename.jpg) I just tweaked the script to "background-image" : "url(./images/" + photoObject.image + "", and in firebug it is showing the sameway .. but images are not showing . Have you ever tried it in wordpress ..... Would be grateful to know what i did wrong .. Ty once more for the great work Reply | Quote

reuben   2010-09-09 21:18:28 Greetings, I have the same problem and it is giving me pain. Basically when I put this into my wordpress template I only get the text showing up no images. I found that when I change the script file: removing the `-` from the var currentZindex = 1; piece of code that the images show but not the text. So what I need help with is getting that text div on top od the images. Assistance please! Reply | Quote

Gary   2010-12-31 22:33:57 Hi, its been a while, but did you ever get this plugin to work for wordpress? Do you have any pointers? Thanks a lot Reply | Quote

Muddassar - Use full image path in script file   2011-02-05 01:18:14 Use full image path in script file for example "url(http://yourdomain.com/wordpress/wp-content/themes/sealionbooks/images/" + photoObject.image + "" instead "url(../images/" + photoObject.image + "" Reply | Quote

Walg - WALG - WEB DEVELOPMENT   2011-12-02 04:13:37 To avoid change the path when you work with a localhost and later online use the following code: "background-image" : "url(" + window.location.protocol + "//" + window.location.host + window.location.pathname + "wp-content/themes/YOUR_TEMPLATE/FOLDER/" + photoObject.image + "", Reply | Quote

Anonymous - re: Nice Tutorial   2010-09-02 13:04:22 Hi Marco, That was a great tutorial .. i tried it in a wordpress theme .. but it is not working ... i dont know why .. the backgrounds are given in the css in the format background-image:url(./images/imagename.jpg) I just tweaked the script to "background-image" : "url(./images/" + photoObject.image + "", and in firebug it is showing the sameway .. but images are not showing . Have you ever tried it in wordpress ..... Would be grateful to know what i did wrong .. Ty once more for the great work I found the problem is that the display:block is not changing to display:none Reply | Quote

Alyssa - try adding something to the jQuery   2011-02-21 20:55:12 place this at the beginning of your script.js file: jQuery(function($) {$(document).ready(function() { and this at the end: });}); I was able to get this to work in wordpress by doing this Hope it helps! Reply | Quote

Ziya - Good!   2011-05-22 17:49:37 Thanks for help! And sure, dont forget how Muddassar says, to use full path to image folder Reply | Quote

Stephanie - Wordpress help!   2012-02-14 14:33:42 I know this post is super old, but I thought maybe you could help me out. I tried using the full path image and also add the code to the script.js file like you had advised, but it doesn't seem to be working. I'm not sure what I'm missing. Could you help? Thanks! Reply | Quote

Shey   2010-09-04 04:44:16 Awesome stuff Marco, thanks for your great work in making this easy for the masses. Reply | Quote

eddy was here - mad props   2010-09-05 18:54:30 this is just what I'm looking for. thanks x2339413849103984 Reply | Quote

Va Infotech - Website Design   2010-09-07 11:16:01 very usefull for me I am Website Designer in india Reply | Quote

Toan Duong - Pixels Design   2010-09-30 01:34:49 This is exactly what i've been looking for. But is there a way to have the text on the html page and not in the script? If you could do that, it'll be perfect, great for SEO as well. Thanks. Reply | Quote

Michel - Request for timed transition   2010-10-01 08:56:49 Hi, before I try to hack your script, would you consider adding a time to the script for the slideShowSpeed? Ideally taken from the image object: var photos = [ { "title" : "Title 1", "image" : "SourceImage1.jpg", "transitionTime":6, // show for 6 seconds Reply | Quote

Michel - oops, post mangled a little   2010-10-01 08:58:19 I had a left angle bracket var photos = [ { "title" : "Title 1", "image" : "SourceImage1.jpg", "transitionTime":6, // show for seconds "url" : "http://www.url.1", "firstline" : "First line 1", "secondline" : "Second line 1" }, { Thanks Reply | Quote

Michel - Did it myself. major rewrite too ;)   2010-10-02 15:20:24 http://plungjan.name/test/js_background_rotator/ Reply | Quote

Jasper - Alternative: fullscreen background slideshow   2010-10-03 14:46:38 Thanks for your great tutorial! I've been developing a (less sophisticated) fullscreen alternative in jQuery which can very easily be applied to any website. This may be of interest to others as well: http://bit.ly/al3xsd Thanks again, Jasper Reply | Quote

kanvulf - :)   2010-10-05 00:19:09 this is amazing but i cant apply it to drupal template Reply | Quote

Frankie Jarrett   2010-10-06 17:07:53 outstanding work marco, thanks! Reply | Quote

Nicolas - increase fading duration   2010-10-15 07:53:09 Thanks for this awesome piece of code Marco I just have one question. I want to increase fading duration between each background image.... Could you help me ? I tried to take a look at script.js but i don't find where this option could be changed... Reply | Quote

Brício Fernandes - WordPress :)   2010-10-19 17:04:16 Hello from Brazil, tried to develop this beautiful effect in wordpress, because it does not work? I'm having problems! Please show some solution, is a case of urgency. Thanks Marco. Reply | Quote

Alyssa - try adding this to your script.js file!   2011-02-21 20:56:30 place this at the beginning of your script.js file: jQuery(function($) {$(document).ready(function() { your code in the script.js file already goes here and place this at the end: });}); I was able to get this to work in wordpress by doing this Hope it helps! Reply | Quote

Hasanah - image resize   2010-10-28 09:33:56 Hi, Thanks for the tutorial. Tested it and discovered that the images aren't resized automatically to fit any screen res. I'm new to jQuery so need some pointers. Tried adding "width": "100%" in the photo var in script.js but that didn't seem to work. Help? Reply | Quote

Raul Pina - accents   2010-11-09 01:30:52 What about special caracteres (ã, ç, à)? Is it possible? Thanks for this jquery Reply | Quote

Scott - preload question...   2010-11-09 21:43:38 Anyone got any idea how to get this preloader http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/ to work with this? I can get the loader to come up; however it doesn't load the next image... Reply | Quote

superman - wow! cooooooooooooool!!!!!!!!   2010-11-18 10:20:17 it is really what i wanted. Thank you very much!!! Reply | Quote

Adrian I. - Web Design   2010-11-22 10:17:10 Amazing tutorial. I guess JQuery is the best solution for user-interactivity. Reply | Quote

lupa - RANDOM IMAGES   2011-01-04 17:05:04 Hello, Your script is really nice, but please how can we make random images ??? I've seen some reply asking this and nobody have given an answer ! i've try this but its not working : Code: showImage = Math.floor(Math.random()*photos.length); PLEASE HELP ! Reply | Quote

Michel - Random   2011-01-04 17:11:30 showImage(photos[Math.floor(Math.random()*photos.length)], currentContainer, activeContainer); Reply | Quote

lupa   2011-01-04 17:36:34 thanks a lot for your fast reply Michel, but unfortunately it's not working... i think we have to add the shuffle just before this line right ? : var showImage = function(photoObject, currentContainer, activeContainer) Reply | Quote

Michel - Random   2011-01-04 17:10:52 showImage(photos[Math.floor(Math.random()*photos.length)], currentContainer, activeContainer); Reply | Quote

ddan - font   2011-01-23 01:22:04 Very nice work. Someone knows the font name of the logo ? Reply | Quote

Rizwan - Thanks but where is google add   2011-01-31 19:19:10 Hi thanks for this slide show it's help me a lot i want to say special thanks to you but haven't find any ad sense on your site put Google add your side then a people like me help you thanks Reply | Quote

Joff - Play control button needs two clicks   2011-02-10 02:39:34 Hi Marco, firstly thank you for this great script - it works very very well! I have one small issue with the Play control button, where if you manually advance to the next slide you need to click Play button twice to resume the slideshow. This is also apparent in your demo - what is needed to make this just a single click? Reply | Quote

Simon M - Slide not fade and start stopped   2011-02-16 17:06:09 This is fantastic! Just wondering how you could slide the images instead of fade in. Also, how can you load the page so the slideshow's stopped and has to be manually started? Thanks Reply | Quote

Neil - Image Resize   2011-02-25 07:00:58 Marco how do you get the images to resize accoring to the browser window size? Reply | Quote

Tom - Worked great with some tweaks   2011-03-02 12:36:14 I've been trying to implement this slideshow on a client's site recently: Independent Financial Advisor.co.uk Admittedly I've not taken full advantage of all the features on it and it's been a case of teaching myself this stuff as I go but this tutorial's been a massive help and actually the clients have seen around a 20% bump in conversion rates and drop in bounce rates, so this has been a massive help. Thanks! Reply | Quote

Tim - Fade out   2011-03-05 13:15:09 Thanks for great work. But how can i add a fadeout effect while the pictures are changing? Thanx for help Reply | Quote

Allen - Transition effect and Caption   2011-03-06 09:28:23 Hi there, Great tutorial, love it. I was wondering is there a way to modify the javascript so the background images slide in from right to left? and how would i be able to add a caption to the bottom of the image? Thanks. Reply | Quote

Michel - Slide it sideways   2011-03-07 07:31:56 $("#headerimg" + currentContainer).animate({width: 'toggle'},function() { setTimeout(function() { $("#headertxt".css({"display" : "block"}); animating = false; }, 2000); }); Reply | Quote

Michel - Stupid smilies   2011-03-07 07:33:28 $("#headerimg" + currentContainer).animate({width: 'toggle'},function() { setTimeout(function() { $( "#headertxt" ).css({"display" : "block"}); animating = false; }, 2000); }); Reply | Quote

Simon   2013-02-17 01:25:27 Thanks all, how about Slide Up, Down & other transitions. Can we have more transitions? Reply | Quote

Simon - -   2013-02-17 01:30:39 Thanks, how about Slide Up, Down & other transitions? Can we have different transition for each image? Reply | Quote

Simon - -   2013-02-17 01:31:14 Ajax request failed. Reply | Quote

Mark   2011-03-11 20:38:23 Very nice tutorial!! Hope more coming tutorials from you!!! Thanks Reply | Quote

amy - cheap clothes online   2011-03-14 03:20:17 I am just a little surprising for your mind. Reply | Quote

ku - PET POINT ku   2011-03-14 23:02:03 Your script is really nice, thanks for sharing!!! Reply | Quote

saurabh - Hiccup Solutions   2011-03-15 07:12:16 Thanks a lot..!! Good Work Reply | Quote

Thaddes - Transition speed   2011-03-15 08:06:36 Hello there, How would I set the speed of the transition? I wish the fading in and out part could be slower. Currently is too fast, kind of like flashing instead of transitioning. Hope to hearing from you soon, millions of thanks! Thaddes Reply | Quote

bruib - Slow the transition   2011-09-29 01:49:58 To slow the transistion speed hunt the line below: $("#headerimg" + currentContainer).fadeOut(function() { and add a number and comma where I've put 4000: $("#headerimg" + currentContainer).fadeOut(4000, function() { Nice and peachy slow fades. Great toots all over this place! Thanks very much. Reply | Quote

leannekera - stop loop at last image   2011-03-17 22:00:25 I love this script thank you so much. Is there anyway to stop the slidshow at the last image instead of repeating the loop? Reply | Quote

Nancy - stop on last slide   2012-08-20 15:27:07 Hi - did you find the answer to this question? Thanks - Nancy Reply | Quote

Frey - Transition   2011-03-20 21:42:02 Hello, Thanks for this slideshow, it's a very good tool! Someone can help us to set transition speed between pictures???? Marco? Thanks Reply | Quote

Satheesh   2011-03-25 12:45:34 marco great work... any ideas of making your code proportionally matching the width and height of the browser? Reply | Quote

Cie - problem with cufon font replacement   2011-03-29 23:40:27 Hi Marco, your script was ver helpfull for the site I´m developing but I have a little problem. I´m replacing the font of the text with cufon script and it works only with the first image. Can you help me with this? Thank you very much. Reply | Quote

Cie - problem with cufon font replacement   2011-03-29 23:41:18 Hi Marco, your script was ver helpfull for the site I´m developing but I have a little problem. I´m replacing the font of the text with cufon script and it works only with the first image. Can you help me with this? Thank you very much. Reply | Quote

cie - problem solved!   2011-03-30 07:28:29 Hi!, I cant believe I solved my problem by myself. I added a line with my font replacement definition fot cufon (the same as in the header tag) just before where the second image is displayed. Cufon.replace('#firstline, #secondline'); // Fade out the current container // and display the header text when animation is complete Hope it will be helpful for someone in trouble with this. Reply | Quote

regis - =)   2012-08-23 16:09:34 thanks Cie, works here Reply | Quote

Nick - Great Preload Solution   2011-03-30 19:47:38 Hi All, Just letting you all know that I've found a great preloader solution for the slideshow. Check it out here: http://staticvoid.info/imageLoader/ What you need to do is include the following: Code: Then before you include the following, making sure to affix the proper path to the folder holding all of your images for the slideshow: Code: var async = false ; var images = [ ]; for ( var i = 1; i < 10; i++ ) { images.push( "images/slideshow/Slide_" + i + ".jpg" ); } $( window ).load( function( ) { $( { } ).imageLoader( { images: images, async: false } ); } ); That seems to work perfectly for me! Reply | Quote

Nick   2011-03-30 20:16:03 can't seem to post the code properly, but if you go to that site you should find it rather easy to implement. Reply | Quote

Darren   2011-04-07 10:48:50 I'm new to JQuery and a bit confused to how I get this preloader working. Do I need to download the two .js files from that website and then edit some of the code? Reply | Quote

Michael   2011-09-14 01:23:05 You need to download one of the two. The .js.min file is just a compressed version of the .js. You also need a version of jquery and jquery UI, which includes "Core" and "Widget." You can find those here: http://jquery.com/ and http://jqueryui.com Reply | Quote

massive - re: Great Preload Solution   2011-10-17 16:49:54 Hi just wanted to know how you implemented the preloader. Thanks Reply | Quote

Mayank Singh Parmar - Mr.   2011-04-19 04:14:14 Can some one write the html for Sylvain Papet plugin. Reply | Quote

Mayank Singh Parmar - Mr.   2011-04-20 04:40:15 I have copied my file here: I modified the js file according to my need. The only thing remain now is how to make the whole image click able to the photo url. Thanks in advance. /* BASIC RESET */ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin; padding;} /* COMMON CLASSES */ .break { clear:both; } /* HEADER */ #header { width:800px; height:147px; cursor:pointer; } .headerimg { background-position: center top; background-repeat: no-repeat; width:800px; height:147px; position:absolute; } /* NAVIGATION */ #nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("../images/headerbg.png"; } #navigation { height:100px; width:960px; margin auto; background-image:url("../images/logo.png"; background-position:top left; background-repeat:no-repeat; } /* SEARCH */ #search { background-color:#051733; float:right; width:220px; padding:10px; } #searchtxt { padding:3px; width:150px; } #searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; } /* MENU */ #menu { position:relative; top:85px; } #menu ul { list-style:none; } #menu ul li { display:inline; font-variantmall-caps; font-size:12px; } #menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; } #menu ul li a:hover { text-decoration:underline; } /* HEADER TEXT */ #headertxt { width:auto; margin auto; clear:both; position:relative; toppx; } #firstline {/* background-image:url("../images/textbg.png";*/ color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; } #secondline { /*background-image:url("../images/textbg.png";*/ color:#CD2B3A; text-decoration:none; font-size:60px; padding 13px 10px; float:left; display:block; clear:both; } #secondline:hover { text-decoration:underline; color:#7F000C; } .pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; } .pictured a { font-size:16px; font-style:italic; letter-spacing; text-transform:none; color:#FFF; text-decoration:none; } .pictured a:hover { text-decoration:underline; } /* CONTROLS */ .btn { height:32px; width:32px; float:left; cursor:pointer; } #back { background-image:url("../images/btn_back.png"; } #next { background-image:url("../images/btn_next.png"; } #control { background-image:url("../images/btn_pause.png"; } /* HEADER HAVIGATION */ #headernav-outer { position:relative; top:106px; margin auto; width:auto; } #headernav { padding-left:684px; } /* CONTENT */ #content { color:#575757; background-color:#eee; } #content p { padding:10px 20px; font-size:16px; width:auto; margin auto; } #content p a { text-decoration:none; color:#CD2B3A; } #content p a:hover { text-decoration:underline; color:#7F000C; } Reply | Quote

Mayank Singh Parmar   2011-04-20 04:42:29 /* * Author: Marco Kuiper (http://www.marcofolio.net/) */ // Speed of the automatic slideshow var slideshowSpeed = 3000; // Variable to store the images we need to set as background // which also includes some text and url's. var photos = [ { "title" : "Stairs", "image" : "vacation.jpg", "url" : "http://www.sxc.hu/photo/1271909", "firstline" : "Going on", "secondline" : "vacation?" }, { "title" : "Office Appartments", "image" : "work.jpg", "url" : "http://www.sxc.hu/photo/1265695", "firstline" : "Or still busy at", "secondline" : "work?" }, { "title" : "Mountainbiking", "image" : "banner.png", "url" : "http://www.sxc.hu/photo/1221065", "firstline" : "Get out and be", "secondline" : "active" }, { "title" : "Mountains Landscape", "image" : "space.png", "url" : "http://www.sxc.hu/photo/1271915", "firstline" : "Take a fresh breath of", "secondline" : "nature" }, { "title" : "Italian pizza", "image" : "dreams.png", "url" : "http://www.sxc.hu/photo/1042413", "firstline" : "Enjoy some delicious", "secondline" : "food" } ]; $(document).ready(function() { // Backwards navigation $("#back".click(function() { /*stopAnimation();*/ navigate("back"; }); // Forward navigation $("#next".click(function() { /* stopAnimation();*/ navigate("next"; // Clear the interval clearInterval(interval); // Start playing the animation interval = setInterval(function() { navigate("next"; }, slideshowSpeed); }); var interval; $("#control".toggle(function(){ stopAnimation(); }, function() { // Change the background image to "pause" $(this).css({ "background-image" : "url(images/btn_pause.png)" }); // Show the next image navigate("next"; // Start playing the animation interval = setInterval(function() { navigate("next"; }, slideshowSpeed); }); var activeContainer = 1; var currentImg = 0; var animating = false; var navigate = function(direction) { // Check if no animation is running. If it is, prevent the action if(animating) { return; } // Check which current image we need to show if(direction == "next" { currentImg++; if(currentImg == photos.length + 1) { currentImg = 1; } } else { currentImg--; if(currentImg == 0) { currentImg = photos.length; } } // Check which container we need to use var currentContainer = activeContainer; if(activeContainer == 1) { activeContainer = 2; } else { activeContainer = 1; } showImage(photos[currentImg - 1], currentContainer, activeContainer); }; var currentZindex = -1; var showImage = function(photoObject, currentContainer, activeContainer) { animating = true; // Make sure the new container is always on the background currentZindex--; // Set the background image of the new active container $("#headerimg" + activeContainer).css({ "background-image" : "url(images/" + photoObject.image + "", "display" : "block", "width" : "800", "height" : "147", "z-index" : currentZindex }); $("#headerimg" + activeContainer).attr("href", photoObject.url); // Hide the header text /*$("#headertxt".css({"display" : "none"});*/ // Set the new header text $("#firstline".html(photoObject.firstline); $("#secondline" .attr("href", photoObject.url) .html(photoObject.secondline); $("#pictureduri" .attr("href", photoObject.url) .html(photoObject.title); /* $("#headertxt".css({"display" : "block"});*/ // Fade out the current container // and display the header text when animation is complete $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".css({"display" : "block"}); animating = false; }, 500); }); }; var stopAnimation = function() { // Change the background image to "play" $("#control".css({ "background-image" : "url(images/btn_play.png)" }); // Clear the interval clearInterval(interval); }; // We should statically set the first image navigate("next"; // Start playing the animation interval = setInterval(function() { navigate("next"; }, slideshowSpeed); }); Reply | Quote

Mayank Singh Parmar   2011-04-20 04:43:18 Reply | Quote

notion age   2011-04-27 15:42:51 Nice work! Is it possible to change the control prev and next button to individual slide's round button instead? Reply | Quote

Michael - same thing   2011-09-18 01:14:52 Hey - I am looking for the same solution - you find one? Reply | Quote

Breanna   2012-01-04 20:41:45 I'm looking for the same thing. Did anyone figure this out? Reply | Quote

Darren   2011-05-03 13:35:20 Hi, I Reply | Quote

Darren - Resize browser window issue   2011-05-03 13:37:09 Hi, I Reply | Quote

Justin Birch - Transition/Fade Issue   2011-05-04 20:22:06 Hi Marco, First off, I wanted to thank you for developing such a great resource for web developers to come. Great job and I look forward to looking to coming back here for years to come. Secondly, I stumbled across your site as one of your tutorials when searching for a background image rotator to use on one of clients websites. We're using the following: http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html I'm having a slight issue as it seems like the transition between every second image (in the even position - 2, 4, 6, etc) does not fade into the next image. I'm not to familiar with jquery but was hoping you could help me with this (as I'm sure it's something simple). I have removed some elements from the script as I did not need all elements but don't know if that's causing the error. The site is: http://johnsconcrete.ca/windex.html Thank you so much in advance for your help. Reply | Quote

Pete - transparent PNGs   2011-05-06 08:09:35 Nice work. Though, I wonder if there is any possibility to work with transparent images in that way ... I have on fix page background image and I want to use the slider to only show some text and maybe a small image next to the text. Thus, the entire rotator width and height should be transparent to see the "fixed" page bgimg in the back. Do I make sense? It should be an easy thing like - just hide the image after the transition, instead of having all images stacked upon each other "visible" ... That would look messy! I just don;t know how to do that bt of programming for that. Thanks champs! Mitch Reply | Quote

Emj - image thumbs instead of arrow controls   2011-05-15 00:53:59 awesome script. will def. be booking marking this script for use in future. Just wondering if there is any way to customise it so image thumbnails of the next and previous images are displayed instead of the left / right arrow controllers? Cheers Reply | Quote

Pete - Images instead of text?   2011-05-24 01:22:19 Just wondering if it is possible to display images in place of the text. I'd like to have a transparent image over the top of a background image. Is this possible, and if so.. how? Reply | Quote

Jon Cook - Photographer   2011-06-02 16:18:03 Hi, Many thanks for posting this - is exactly what I've been looking for!!! However I cant seem to get it to work..... I've edited the js code to point towards the server where I've stashed my background images however all I get is black space where the image should be - any thoughts? Thanks in advance, Jon Reply | Quote

Michael - Perfect   2011-06-07 02:02:52 I've been trying to find a way to do this for ages and had almost given up! Great article, thank you very much Reply | Quote

Michael   2011-06-07 02:03:51 I've been trying to find a way to do this for ages and had almost given up! Great article, thank you very much Reply | Quote

super online pharmacy clinic - super online pharmacy clinic   2011-06-09 08:40:25 I am strongly associated with this site. As this site has inspired me a lot always in a new way and made my work easy by every time highlighting on the new issue and make me pleased. Thanks you people rock!!!!!! Reply | Quote

pharmacy infotech - pharmacy infotech   2011-06-09 08:41:08 I am frequent reader of the articles and new knowledgeable post about new things always and would be searching new stuff for that. And I really thank you people for providing us new articles and post. Thanks a lot! Reply | Quote

best retail pharmacy info - best retail pharmacy info   2011-06-09 08:42:01 It was really surprising to see such a wonderful post that is inspiring and informative and caught the attention of many people. I am a regular visitor of the blog and love the work of these people. Reply | Quote

anti smoking pills club - anti smoking pills club   2011-06-09 08:42:55 This is a wonderful website that has great info and is helpful for one and all. I always look forward for your website to gather any kind of information. Hope you people do like this only wonderful job. Cheers Reply | Quote

discount over weight pills - discount over weight pills   2011-06-09 08:43:42 I often like surfing on net and find info on new things and this time I got a new website which has great info and is quite brilliantly written. Am just thrilled and excited to see this and hope to see more work of you people in future. Reply | Quote

pharmacy information sharing - pharmacy information sharing   2011-06-09 08:44:24 You guys are really wonderful who search and bring such a wonderful info, I am glad to see this time also a useful stuff that had inspired me. Thanks a lot do keep giving us genuine stuff Reply | Quote

online diabetes pills informat - online diabetes pills information   2011-06-09 08:45:11 I enjoy reading the post and have become a great fan of yours. Keep up with the good job and please provide us with great blogs. I really appreciate the research you people take for the posts. Reply | Quote

herbal anti smoking pills - herbal anti smoking pills   2011-06-09 08:45:56 It was perfect collection of such useful information. This was a helpful post foe me. Thanks for sharing such nice information. Thanks a lot! Reply | Quote

cheap online store pharmacy bl - cheap online store pharmacy blog   2011-06-09 08:46:55 I was a great experience to read your post. I found your site from Google and thank a lot for this nice and wonderful information. The information posted was useful and interesting. Reply | Quote

excellent pharmacy - excellent pharmacy   2011-06-09 08:47:37 Thanks a lot for such a wonderful post, the stuff posted were really interesting and useful. The quality of the content was good and clear. Thanks for the post Reply | Quote

retail pharmacy information - retail pharmacy information   2011-06-09 08:48:33 I appreciate the ideas posted on your site; they were very informative and innovative. It was worth visiting your site. Thanks a lot for such valuable information. Reply | Quote

diabetes pills center - diabetes pills center   2011-06-09 08:49:24 It is amazing to such useful information at one place. I was looking for the same information from a long time, at last I found it. Thanks for such innovative and amazing information. Reply | Quote

top pharmacy museum - top pharmacy museum   2011-06-09 08:50:25 I was very pleased to visit your site; I was definitely a wonderful site. The post was worth reading. I enjoyed each bit of your post. Thanks for such excellent post. Reply | Quote

birth control pills guide - birth control pills guide   2011-06-09 08:51:08 I recently came across your blog and have been reading along. I have no words except to say that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. Reply | Quote

best generic pharmacy tips - best generic pharmacy tips   2011-06-09 08:51:52 I am extremely happy to write a comment on this blog. The information provided on the site was very informative and useful. Thanks a lot for such needy and innovative ideas and concepts. Reply | Quote

Jan - Thank you very much!   2011-06-17 09:07:39 Thanks so much for that great work. It works perfect! ... but not in IE7 ;-) It shows the loading gif an nothing happens. No bg-image. Can anyone help me? Reply | Quote

Jan   2011-06-17 09:15:32 Same Problem in IE8... Reply | Quote

David   2011-06-30 00:52:49 How would I get this working with drupal? I think its beautiful. I just have a basic site, my own site that I want to use this script in a panel on the front page. Reply | Quote

Honse - Background images as links   2011-07-01 06:55:21 Is it possible to link the entire background image instead of displaying a text link? Reply | Quote

Anonymous   2011-09-30 19:11:21 I am looking for the same solution - you find one? Reply | Quote

Anonymous   2011-09-30 19:11:50 I am looking for the same solution - you find one? Reply | Quote

Google Optimizasyonu - Google optimizasyonu   2011-07-05 09:12:40 Thanks this is very usefull... Reply | Quote

magic.lab - html code help   2011-07-07 06:44:27 Hi, can you write more information how to use Sylvain Papet plugin? It's beautiful but I can't find html code for using it Reply | Quote

Daryl   2011-07-13 12:19:00 This plugin is amazing. However, I found that this totally doesn't work with IE. I know, I read the demo. It's not that I use Internet Explorer, but I don't want those who do to think they've been excluded from viewing the site, if you know what I mean. Is there any way to make this work on IE? Reply | Quote

Astigmatizam - Astigmatizam   2011-07-20 11:26:03 wow, really nice, i'll use these great tips on my site, thanks Reply | Quote

LAwoman   2011-07-28 23:15:30 I am also wondering if there are instructions for the Sylvain Papet plug in. Reply | Quote

hirmani80   2011-08-02 07:02:04 This is very great by providing the nice info in this blog. I had really like it very much for using the nice technology is visible in this blog. Thanks a lot for using the nice info in this blog. Reply | Quote

hirmani80   2011-08-02 07:03:43 Great work this fantastic website and the great technology is visible in this blog. I had really like it very much for using the nice info in this blog. I am very much thanks for using the great info in this blog Reply | Quote

Silky - multiple instances   2011-08-11 14:15:34 Whats the best way to use this feature (with different photos) throughout a site. Have got the base functionality working on Wordpress - thanks to tip from people above!! I will create a new var in the script to hold the new photos etc, what else do I need to do, or should I just keep it all seperate.. Thanks Reply | Quote

Scott33 - Full screen   2011-08-12 15:32:54 Great tutorial. Anyone managed to get this effect to work with images filling the entire screen? (dependant on browser / tool bars etc) Reply | Quote

Justin Lascelle   2011-08-16 14:46:26 To anyone having trouble getting this into a Wordpress theme, keep in mind that Wordpress runs jQuery in compatibility mode. The simple fix is to replace ever instance of the $ sign with the word 'jQuery' e.g. jQuery(document.ready) instead of $(document.ready). Reply | Quote

Croatia Istria - Croatia Istria   2011-08-19 21:46:29 Great tutorial, relly nice, thanks for sharing! Reply | Quote

HTML5 Guy - To Random the background   2011-08-31 04:23:53 I found that you just replace this line > showImage(photos[currentImg - 1], currentContainer, activeContainer); with > showImage(photos[Math.floor(Math.random()*photos.length)], currentContainer, activeContainer); That's it .. Hope this help for you guys... Reply | Quote

html5 new comer - slider code in html5 template   2012-07-30 20:51:03 Hi, Does anyone have the code for this slider in html5 template. Since the header and navigation are combined for this, I am hoping someone already has already implemented using html tags and formatting. Thanks Reply | Quote

Aromaterapija - Aromaterapija   2011-09-03 09:15:53 Great work Marco and thanks for sharing. Reply | Quote

Snoopy - Changing text   2011-09-05 15:47:13 [size=medium][color=black]Thanks for sharing this. One problem I see with this, is with SEO: the changing text is in the script.js file, therefore not at all usefull for SEO. Anyone has an idea to have the changing text in html? Many thanks [/color][/size] Reply | Quote

raiderek - Easy way to preload the Images   2011-09-13 22:46:24 Just put this before [code] jQuery.preloadImages = function(){ for(var i = 0; i Reply | Quote

raiderek - Easy way to preload images - check this site   2011-09-13 22:50:55 The code is not visible Just use the method used in this page to preload the images and you are done! http://www.emenia.es/como-pre-cargar-imagenes-con-jquery/ Reply | Quote

Michael - The Simplest Preloader   2011-09-14 05:55:04 Here's one for all the newbs like me who just want a way to make a couple of images display smooth transitions right off the bat. My slideshow has 6 images and takes about 5 seconds to load. Tested in Chrome, Safari, and Firefox on OS 10.6. Drop this right after $(document).ready(function() { Code: var loading; //loop through each photo object for ( var i = 1; i < photos.length; i++ ) { //id them from images/index or wherever you stored them loading = ''; //load them $(loading).load(); }; Reply | Quote

Patrick Amer   2011-10-25 20:51:41 hello michael, I am also a begginer and wanted to know what do you mean by: //id them from images/index or wherever you stored them how can I add my images can you let me know? thank you of did you find any other method? thank you Reply | Quote

Michael   2011-09-16 20:21:59 This is a great script! Is it possible to have - as an alternative to the prev and next navigation - thumbnails to click to the various images? Thank you! Reply | Quote

Anonymous   2011-09-17 13:20:06 Reply | Quote

Will - Safari Scroll Speed   2011-09-19 06:43:15 Hi There The scroll speed in Safari seems to be inconsistent. Seems to work nicely, then it will either speed up or slow down...anyone else experienced this? http://www.cowleymining.com Reply | Quote

Ramapriya - Wont work in WordPress   2011-09-20 04:13:56 This works nicely outside of WordPress, but despite working for many hours and trying every suggestion above, I cannot get this to work in WordPress. Any more suggestions? Reply | Quote

jay   2011-09-30 19:03:20 anyone figure out how to make the images on click take you to another page? Reply | Quote

gabe mott - Got this working in Wordpress Thesis   2011-10-01 01:04:02 Thanks to godhammer, got this working pretty well in Wordpress Thesis. I had to remove the nav buttons because it would load them first on the left and prevent all parts of the slideimage to the right to stagger load. But I think it looks great. Just a couple of more tweaks. Implementation is here: http://colorbox.me/ Forum on the how is here: http://diythemes.com/forums/showthread.php?59058-jsQUERY-can-I-make-this-slideshow-or-am-I-crazy-to-try Reply | Quote

RS2 - Great Script!! Any way to open "firstline" and   2011-10-03 02:02:52 Great work on this script and its accompanying instructions! Is there a way to have the URLs defined in "firstline" and "secondline" open in a new windows (ie: target="_blank"? Reply | Quote

JaY   2011-10-03 16:12:30 Hi, Marco! Awesome work! do you know how to add php script to load the images from a directory or database? please your advice... thanks! Reply | Quote

Horacio - AWsome   2011-10-04 09:50:56 Great job !! love this !! is there an option of putting the urls away from the jquery script ? when I simple take the info away, all the slide show goes away... Thank you and again, great info, great job !! Reply | Quote

Mike - Plugin   2011-10-06 14:08:50 So I guess no one has figured out how to use the plugin. Reply | Quote

Bobby - Slide?   2011-10-06 21:59:26 How would I get the images to slide?? Reply | Quote

Toxic Web   2011-10-15 11:33:30 See my comment below (to pepe luis) Reply | Quote

pepe luis - Please a example of how use the new plugin   2011-10-06 22:22:57 Hello, i try use the new version how a plugin but not have luck, please a sample of how use it, thanks Reply | Quote

Toxic Web   2011-10-15 11:31:57 My last comment hasn't got through, if you check my site (should be linked on the avatar) there's info on how to get the plugin working. Reply | Quote

IT Training Nepal - show white bg in between transitions   2011-10-15 04:23:27 I want to show white background colors in between transitions more visible so that the image fades out to white and then comes back with another image. thanks a lot. Reply | Quote

Jeroen - Twitter intergration   2011-10-16 10:53:11 Hi all and great work Marco. I whas wondering would it be possible to ingrate twitter. Like some sends a tweet with a photo and text to a special hashtag and it will show like your slide show that would be great!! Could someone help me with this! cheers Jeroen Reply | Quote

Luciano Skorianez - Congratulations   2011-10-19 13:43:54 Great Jquery aplication. I´m put in my blog Reply | Quote

Tyler - Adding a link...   2011-10-19 16:37:31 How can you add a link to the image itself? Or is there a way to add a specific area to link in on the image? Reply | Quote

Rahul   2011-10-23 16:23:05 its very useful to help my job. thanks for sharing. Thank you. Very very useful. Reply | Quote

Patrick   2011-10-25 21:02:28 Please can anyone give me all the code including the loader for the pictures? Reply | Quote

damon - question onclick command   2011-10-27 12:32:20 I love your work marco. Seriously great stuff. I tried to make some adjustments to suit my website. I haven't synced it with the current website (after updating with your code just yet). But if you go to my website, the changes i made were that i switched the slider to your fullscreen slider and added my thumbnail images (ones with the mouse hover - 'change from black/white to color' effect) in reference to below (#1 was what you had as "back" or "next"... i'm trying to make when clicking what is now "1" to make it change the background image to "test1.jpg". and same for the other numbers but to its respective picture number. hope you or someone can help. Thanks! var photos = [ { "title" : "Stairs", "image" : "test1.jpg", "url" : "http://www.sxc.hu/photo/1271909", "firstline" : "Going on", "secondline" : "vacation?" }, { "title" : "Office Appartments", "image" : "test2.jpg", "url" : "http://www.sxc.hu/photo/1265695", "firstline" : "Or still busy at", "secondline" : "work?" }, { "title" : "Mountainbiking", "image" : "test3.jpg", "url" : "http://www.sxc.hu/photo/1221065", "firstline" : "Get out and be", "secondline" : "active" }, { "title" : "Mountains Landscape", "image" : "test4.jpg", "url" : "http://www.sxc.hu/photo/1271915", "firstline" : "Take a fresh breath of", "secondline" : "nature" }, { "title" : "Italian pizza", "image" : "test5.jpg", "url" : "http://www.sxc.hu/photo/1042413", "firstline" : "Enjoy some delicious", "secondline" : "food" }, { "title" : "Italian pizza", "image" : "test6.jpg", "url" : "http://www.sxc.hu/photo/1042413", "firstline" : "Enjoy some delicious", "secondline" : "food" } ]; $(document).ready(function() { // Backwards navigation $("#1".click(function() { stopAnimation(); navigate("test1.jpg"; }); Reply | Quote

Will Hives - Text takes time to appear   2011-11-02 22:01:27 Is it possible to speed of the text appearing over the images, there seems to be a slight delay. Cheers. GREAT SCRIPT! Reply | Quote

Shipra - How to add more text?   2011-11-07 11:06:19 Hello! I am a beginner... its a good script but when i am trying to add more text lines besides "firstline" "secondline" im not getting success!! Can we add more text paragraph or bullet-ed text in this slideshow?? Reply | Quote

Izrada web Stranica   2011-11-09 14:11:45 Great post and great script, thanks for sharing Reply | Quote

Melaina - Preloader   2011-11-11 11:42:46 Hi all is there an image pre-loader that you have all found to work? I see some people have offered to send pre-loaders that they have found / developed. I will be grateful if you can send? (info@cantaloupe.co.za) :-) Reply | Quote

Timothy   2011-11-14 16:12:41 same here - looking for a pre-loader! Tried a few but can't seem to get any to work. Reply | Quote

Dave - Text not disappearing   2011-11-17 00:59:30 Any way to NOT have the text disappear/change. Just remain static over the changing images? Reply | Quote

Dave - Text not change over image   2011-11-17 01:15:41 Just added this because I did not subscribe the first post. Reply | Quote

Andy   2012-04-30 20:16:56 Just look at how he styled his header div, and mimic that div with a text div and position wherever you like. Doesn't have to be part of the javascript. Reply | Quote

zappapa - fadeOut speed or duration?   2011-11-18 00:46:02 Great stuff Marco! But... I tried to alter the speed of the fadeOut without any luck. I would like a very long (let's say 20 seconds) transition from one image to another. Changing this: Code: // Fade out the current container // and display the header text when animation is complete $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".css({"display" : "block"}); animating = true; }, 500); }); to this: Code: // Fade out the current container // and display the header text when animation is complete $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".css({"display" : "block"}); animating = true; }, 20000); }); So I changed the number 500 to 2000 but didn't work the way I wanted. It displayed the images for a longer period, but the duration of the transition (fadeOut) itself stayed the same. I also tried it with all kinds of extreme values in combination with extreme values for slideshowSpeed but still no luck. I would like to able to alter a variable like "fadeSpeed" or "transitionDuration". Any help would be very much appreciated Reply | Quote

Anuradha   2011-11-21 19:38:13 Hi Great Work...I have used this work in one of my websites..Client liked it....Is there any way of changing animation from fading to sliding Reply | Quote

alovilla - Thank you.   2011-11-23 15:49:16 interesting slider. I used personel web page. Thank you Reply | Quote

Mike   2011-11-27 15:02:56 Great Work. I have been looking for something like this for a while now. Thanks. Mike. Reply | Quote

Anna O'Sullivan - Pictures wont show!?   2011-11-30 07:59:39 Hello there, first of all im quite new in this but does anyone know why i cant get the big images to show? I have done everything step by step. My pictures are in a folder...they're not located on the net nor do i have it online (Im working localy on my PC) I have tried to do it like this: [b]var photos = [ { "title" : "Stairs", "image" : ".../images/gameben.jpg", "url": "http://localhost:49185/AnnaO'SullivanExam/LargeBackDrop/images/biking.jpg", "firstline" : "Going on", "secondline" : "vacation?" }, { [/b] It shows everything EXCEPT for the images I work in ASP.NET Can anyone help? Thank, Anna Reply | Quote

hetal   2011-12-01 11:07:59 this is really a great script but I want to know how to creat pagination in this beautiful script? Reply | Quote

T-Shep - thanks Marco... here's a Preloader that works nic   2011-12-01 14:24:34 function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $('')[0].src = this; // Alternatively you could use: // (new Image()).src = this; }); } // Usage: preload([ 'images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg' ]); Reply | Quote

E Robinson   2011-12-01 19:03:13 Had seen the visitphilly.com site and loved it..then found your site..couldn't believe my great fortune!! I'm a newbie and I'm trying to integrate a drop down menu similiar to philly site..not sure how to do this..any ideas or examples would be greatly appreciated. thanx in advance. Reply | Quote

Turnike Sistemleri - Turnike sistemleri   2011-12-07 16:00:43 OO very comment! Reply | Quote

Vijay Kanta - Stupendous   2011-12-08 06:57:14 This is an incredible job by Marco. Can be changed to whatever way you want to. Two thumbs up! Reply | Quote

alessandro mariani - WOW   2011-12-12 16:53:31 It is just i was looking for...Very Great!!!!...Thanks. Reply | Quote

alessandro mariani - css property   2011-12-12 16:56:26 Just one question...does it support the background-size:cover css property? Reply | Quote

Ayac   2011-12-15 07:19:34 Pure perfection... very nice, clean code that is easy to understand. I like that there is nothing extra, no clutter, you go straight to the point. Great job! Thanks Marco! Reply | Quote

Valentino   2011-12-20 16:48:04 Wow it's such an amazing plugin. I've only a question. I'm quite a noob on jQuery and this is my first script. I try to use it on a webpage where I manage all the animation with Mootools and your script works perfectly, but everything else crashes. There is a way to solve this problem? Thank you Valentino Reply | Quote

Gytis - FadeIn and FadeOut speed   2011-12-22 22:52:19 hi Marco and Everybody! how I can change the FadeIn and FadeOut speed?? pls help me ) Reply | Quote

Ahmed - Decrease the height   2011-12-27 11:41:13 Hi can i decrease the height, if yes, how ? Thanks Reply | Quote

Tim   2012-01-04 17:50:08 Marco, this is fantastic - we're implementing it on our site right now. Wondering if there's a way to get the text to show up at the same time as the image - right now there's a slight delay. I've been through the js file, but I don't know enough of what I'm doing there. Any ideas? Thanks -- Tim Reply | Quote

Brian - Does not display properly on an iPad   2012-01-06 19:49:08 Hi Everyone - Looks like there is a bug with this code (and that of the VisitPhilly.com website) when viewing this technique on an iPad. The site iPadPeek.com replicates exactly what I'm seeing on an actual iPad when viewing any of my own websites that use this technique, or the VisitPhilly.com website: http://ipadpeek.com/?url=visitphilly.com&portrait Any ideas for a solution? Reply | Quote

Daniel Watson   2012-01-16 11:05:27 Really great post. This post will help me a lot. Thanks for your support. Reply | Quote

Zafar Shaikh   2012-01-16 11:07:42 Really great post. This post will help me a lot. I was looking for such stuff. Thanks for share Reply | Quote

Zafar Shaikh - Great Blog   2012-01-16 11:08:31 Really great post. This post will help me a lot. I was looking for such stuff. Thanks for share Reply | Quote

Giorgos - Great work but..   2012-01-17 21:42:03 Hello, it seems that this is what I was looking for my header background slider however I can't make it work. I know it's me , it'd be great if you can zip a sample and post it to the blog or even email it to me. Thanks, Giorgos Reply | Quote

Moroni Lemes - Can that work for tables???   2012-01-19 23:41:00 I really needed the very same effect with the controls to display several tables... especially included from outsite with PHP script. Can that be done with your code?? I gave up on trying to figure that out for today If you could, my friend, that would be super great!! Thanks a lot in advance Reply | Quote

Anonymous   2012-01-26 02:17:41 I want Thumbnail navigator in control bar Reply | Quote

Tottto - thank   2012-01-28 01:10:31 thank you man thank Reply | Quote

Patrick - Strange Bug   2012-01-31 13:04:09 Hi Marco, Thanks for a fantastic script, I've been using it on a site and it works beautifully. I've modified it a bit, so it could possibly be something I've done but I've noticed that if the first line of text has only one word, or one word, a space and only one letter, the text shoots off to the right hand side of the page for some reason, outside of the header div. I have no idea why, just thought I should let you know. So for e.g. Murkage wouldn't work, not would Murkage n but Murkage No displays properly.... weird? Reply | Quote

Patrick   2012-01-31 13:17:55 Ah ignore me, I removed the width property from headertxt in the CSS and everything works fine now. Cheers Reply | Quote

Heduino   2012-01-31 19:21:39 I'm a webdesign and I would like to do this while getting the images from a database. How would that work? Reply | Quote

Stefan - Stop autoplay   2012-02-04 17:28:40 Hi. I have a little question. Can i stop the autoplay of the slider? i would like to change slides only if i click on play . Reply | Quote

Carlos - Joomla Implementation   2012-02-09 12:53:37 Hi, I've just found this great slider and was wondering if there's a proper way to use it on the index of a joomla powered website. Thanks Reply | Quote

Darrell - Loving all of this   2012-02-09 19:14:25 Loving this slideshow, very classy work. And also thanks to the clarification from @HTML5 Guy for the randomize script change which works like a treat. Awesome, awesome work and sharing. Reply | Quote

james - pulling as a json literal won't render   2012-02-13 05:25:12 so i have an interesting problem and am not seeing the why it isn't working... I'm writing the following: Code: $.getJSON(url,{rtn: 'rotator'},function(data){ console.log(data); console.log(JSON.stringify(data)); return data; }); now the console is logging the following: data: Code: [ { "image": "carousel_1.jpg", "url": "?cid=1&sid=1&pid=1", "urltext": "Sign Up", "firstline": "Nullam bibendum pretium consectetur. Curabitur laoreet quam vel!vulputate malesuada." }, { "image": "carousel_2.jpg", "url": "?cid=2&sid=1&pid=1", "urltext": "Join Us Now!", "firstline": "Curabitur laoreet quam vel nulla vulputate malesuada." }, { "image": "carousel_3.jpg", "url": "?cid=3&sid=1&pid=1", "urltext": "Register!", "firstline": "Nullam bibendum pretium consectetur." }, { "image": "carousel_4.jpg", "url": "?cid=4&sid=1&pid=1", "urltext": "More Info...", "firstline": "Curabitur laoreet quam vel nulla vulputate malesuada." } ] stringified data: Code: [{"image":"carousel_1.jpg","url":"?cid=1&sid=1&pid=1","urltext":"Sign Up","firstline":"Nullam bibendum pretium consectetur. Curabitur laoreet quam vel!vulputate malesuada."},{"image":"carousel_2.jpg","url":"?cid=2&sid=1&pid=1","urltext":"Join Us Now!","firstline":"Curabitur laoreet quam vel nulla vulputate malesuada."},{"image":"carousel_3.jpg","url":"?cid=3&sid=1&pid=1","urltext":"Register!","firstline":"Nullam bibendum pretium consectetur."},{"image":"carousel_4.jpg","url":"?cid=4&sid=1&pid=1","urltext":"More Info...","firstline":"Curabitur laoreet quam vel nulla vulputate malesuada."}] however I'm receiving "photoObject undefined" its exactly the same as the static result (reflected in the data response), and it'll work as "static" content. obviously I want to pull it in dynamically... what am i missing? Reply | Quote

Stephanie - Wordpress issues   2012-02-14 03:50:37 I know there have been several posts above regarding the Wordpress image source issue. I'm not having luck with any of the above fixes. Any other ideas? Reply | Quote

Jim Bouschor   2012-02-14 17:11:03 Any way to enable pagination? Our clients likes this but wants the option of clicking around the slider Reply | Quote

francesca   2012-02-15 09:44:49 thank a lot for your goodness! Reply | Quote

Sammantha   2012-02-15 18:09:23 I absolutely love this slideshow. With that being said, has anyone found a way to make it so the image shows 100% of the width no matter what the computer's resolution is? I know it's possible... just not sure how to do it with this. Thanks! Reply | Quote

Web Design El Paso   2012-02-16 12:56:04 Good informative stuff shared. Thanks Reply | Quote

junglejim   2012-02-16 23:12:34 Great script! Just getting to grips with css designing. I'm wondering if anyone has some code to preload the next 2 images in the slideshow? thanks Reply | Quote

jimmy ali - bullet pagination missing   2012-02-18 01:56:41 Hi Marco, I found the script very helpful. Although, I am very much stucking to show the bullet pagination determining running slider. Please any one let me know how can i attach a bullet paging with the slider...! Reply | Quote

meme   2012-02-22 09:32:22 thanks for the tutorial and the script! can anyone help? i have an issue with image display. the images are loading and displaying in the right place. however, there is a big block right below without any height that keeps flicking when image loads and below this block is my text which should go on top of the rotating images obviously. i used position:relative. i'm not really good at this and i'm giving up on trying different things. please help if any ideas. many thanks! Reply | Quote

meme   2012-02-22 10:26:24 i manage to fix the issue (i thought that headerimg1 and headerimg2 are a sequence hence added 3 more to display 5 images in rotation). however, i am still having issue. the image which loads, kind of flicks below the displayed image before it is displayed. any idea what i might have done wrong?? thanks guys! Reply | Quote

Pat - can we put textbox like bing   2012-02-26 09:17:51 Hello, Thanks for such an awesome code. One thing I noticed is the text is changing for every slide. Instead, is it possible to put a static text box and search button (as in bing.com). Please help. Thanks. Reply | Quote

Troy - Music ?   2012-02-26 22:10:18 Can Music be added to this Reply | Quote

Car Hire Croatia - wow great tips   2012-03-02 12:57:50 I really enjoyed reading this, thanks for great tips Reply | Quote

DIGITALUnderworld - My Lucky Leash   2012-03-05 02:17:50 I am using your wonderful script, but I am not seeing the fading and was wondering if there is a way to pre-load the images? I am using 10 or less at the moment. Reply | Quote

Blake - Designer   2012-03-07 21:32:03 Hey! This works great in html locally on my website but when I put it into wordpress I am only getting a white screen. Is there an easy fix to this? Reply | Quote

thalhah - how to disable auto start slideshow   2012-03-08 04:56:03 how to disable autostart? slide will start only when user click play button Reply | Quote

Watt - Great !!   2012-03-09 15:14:19 Wooowww !! Awesome script ! Thanks for sharing Reply | Quote

Najam vozila - great sample   2012-03-11 11:46:01 thanks for sharing this example with the world! Reply | Quote

Umzüge Teichert - Danke / Thank you!   2012-03-11 16:27:01 Da wir gerade dabei sind unsere Website zu relaunchen kommt dein Tutorial gerade recht! Denn bis dato sind nur Scripte zu finden in dem die Bilder 100% Background ermöglichen! Deshalb danke und weiter so! Gruß aus Berlin Reply | Quote

B.K. - Stretching to fullscreen   2012-03-19 15:43:10 Hi, thanks for sharing! I just wonder is it additionally possible to stretch images fullscreen so they can automatically adjust the screen resolution? Thanks! Reply | Quote

car rental croatia - Nice example   2012-03-23 23:05:09 just checked your tutorial and it's great example of how to play jquery and bcg image. thanks Reply | Quote

Paid Directory List - Nice Look after install   2012-03-27 10:17:57 Nice Look after install in our Website. Our clients are very happy Reply | Quote

Liamoko - More than 6 images...   2012-03-28 07:51:52 Marco, First of all great work! I have one stupid newbie question... How can I add more images, to the array? I tried adding one, but no luck. Thoughts anyone? Thanks in advance... Kind regards, Reply | Quote

Liamoko   2012-03-28 09:03:04 Never mind, I figured it out, thanks again! Reply | Quote

javier   2012-04-01 19:45:20 I would love to make the image the link. any body know how? Reply | Quote

Kaue - Thumbnails   2012-04-02 17:52:26 Hello, I'm trying to do dynamic thumbnails. And for that, is only missing link to the thumbs, and I am not able to do. Here's the JS code inside "$ (document).ready(function() {": Code: /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders Can someone help me finish the thumbnails? Thanks Reply | Quote

Kaue - Thumbnais   2012-04-02 17:54:18 Hello, I'm trying to do dynamic thumbnails. And for that, is only missing link to the thumbs, and I am not able to do. Here's the JS code inside "$ (document).ready(function() {": /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders Can someone help me finish the thumbnails? Thanks Reply | Quote

Kaue - Thumbnails   2012-04-02 17:56:49 I can not post the code, I'll try again. Hello, I'm trying to do dynamic thumbnails. And for that, is only missing link to the thumbs, and I am not able to do. Here's the JS code inside "$ (document).ready(function() {": Code: /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders Can someone help me finish the thumbnails? Thanks Reply | Quote

Kaue   2012-04-02 17:58:27 Here's the JS code inside "$ (document).ready(function() {": [code] /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders < = contaslider){ $('#navs_sliders').append(''); zerosliders++; } $('#navs_sliders').last().append(''); $('.btns_new_slider').click(function(){ var qlnumberslider = jQ(this).attr("id"; jQ(this).html(qlnumberslider); }); /*fim:THUMBS QUANTIDADES DE SLIDERS*/ And the HTML: Reply | Quote

Kaue - re:   2012-04-02 17:59:44 Kaue wrote: Here's the JS code inside "$ (document).ready(function() {": [code] /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders < = contaslider){ $('#navs_sliders').append(''); zerosliders++; } $('#navs_sliders').last().append(''); $('.btns_new_slider').click(function(){ var qlnumberslider = jQ(this).attr("id"; jQ(this).html(qlnumberslider); }); /*fim:THUMBS QUANTIDADES DE SLIDERS*/ And the HTML: Reply | Quote

Kaue - re: re:   2012-04-02 18:01:40 Kaue wrote: Kaue wrote: HTML: [code] Reply | Quote

Kaue - re: re: re:   2012-04-02 18:03:21 Kaue wrote: Kaue wrote: Kaue wrote: HTML: Code: Reply | Quote

Kaue - re: re: re: re:   2012-04-02 18:04:17 Reply | Quote

Kaue   2012-04-02 18:04:59 Code: Reply | Quote

Kaue - thumbnails   2012-04-02 18:06:49 Quote: Reply | Quote

Kaue   2012-04-02 18:07:23 Reply | Quote

Kaue   2012-04-02 18:10:35 ADD in : headernav-outer: <div id=navs_sliders></div> Reply | Quote

Kaue - Thumbnails   2012-04-02 18:12:26 Hello, I'm trying to do dynamic thumbnails. And for that, is only missing link to the thumbs, and I am not able to do. Here's the JS code inside "$ (document).ready(function() {": Code: /*THUMBS QUANTIDADES DE SLIDERS*/ var zerosliders=1; var contaslider=photos.length; while (zerosliders<=contaslider){ $('#navs_sliders').append('<div class="btns_new_slider" id="'+zerosliders+'"></div>'); zerosliders++; } $('#navs_sliders').last().append('<div class="both"></div>'); $('.btns_new_slider').click(function(){ var qlnumberslider = jQ(this).attr("id"; jQ(this).html(qlnumberslider); }); /*fim:THUMBS QUANTIDADES DE SLIDERS*/ And the HTML: Code: <div id="headerrrrrr"> <!-- jQuery handles to place the header background images --> <div id="headerimgs"> <div id="headerimg1" class="headerimg"></div> <div id="headerimg2" class="headerimg"></div> </div> <!-- Slideshow controls --> <div id="headernav-outer"> <div id="navs_sliders"></div> <div id="headernav"> <div id="back" class="btn"></div> <div id="control" class="btn"></div> <div id="next" class="btn"></div> </div> </div> <!-- jQuery handles for the text displayed on top of the images --> <div id="headertxt"> </div> </div> Can someone help me finish the thumbnails? Thanks Reply | Quote

Kaue - re: Thumbnails   2012-04-02 18:16:04 CSS: Code: #navs_sliders { position:absolute; top:-185px; left; } .btns_new_slider { float:left; width:14px; height:14px; background:#ccc; border:2px solid #fff; border-radius:8px 8px 8px 8px; margin:3px; cursor:pointer; } Reply | Quote

tuba   2012-04-03 22:39:32 wow, great tutorial, just wondering how come I add add 1,2,3 ... etc were we see the start/pause/next control buttons. Reply | Quote

Anonymous - Mersin Tatik Köyleri   2012-04-06 11:32:01 I'm trying to do dynamic thumbnails. Reply | Quote

Anonymous - re: Mersin Tatil Köyleri   2012-04-06 11:33:28 Anonymous wrote: I'm trying to do dynamic thumbnails. Reply | Quote

Jay - How to change fade-in, fade-out speed   2012-04-08 09:27:29 Hello Marco, This is exactly what I was looking for except can you tell us how to change the fade-in, fade-out speed. I'd like it to be a little bit slower. Thanks. Reply | Quote

Anonymous - re:   2012-04-15 17:10:38 junglejim wrote: Great script! Just getting to grips with css designing. I'm wondering if anyone has some code to preload the next 2 images in the slideshow? thanks just wondering if anyone has any suggestions on above post? thanks Reply | Quote

Andy   2012-04-30 20:21:43 Include this in your HTML: var images = [ '../_img/img1.jpg', '../_img/img2.jpg', '../_img/img3.jpg' ]; $(images).each(function() { var image = $('').attr('src', this); }); Reply | Quote

Andy   2012-04-30 20:23:05 With the code tag...: Code: var images = [ '../_img/interior/tileintro_dune.jpg', '../_img/interior/tileintro_lace.jpg', '../_img/interior/tileintro_tucker.jpg' ]; $(images).each(function() { var image = $('').attr('src', this); }); Reply | Quote

Anonymous   2012-06-16 14:36:57 thanks for the reply. Presumably this just loads specific images? is there a script to preload the next 2 anywhere in the sequence? thanks Reply | Quote

Kyco - developer   2012-04-19 16:54:23 Excellent work sir! I am pretty new to the jQuery boom, and I see that Sylvain Papet has made a plug-in...being a novice to jQuery, I was wondering if you could please explain how to implement the plug-in. Do I just add a script reference to the html after both the jquery.min.js and script.js references? Reply | Quote

John Shep   2012-05-15 15:00:41 Great work - Does anyone have a simple way to pause the slider on mouse hover? I've added a video embed to one of the slides and I'll need to make the slider pause to make it functional. Any help is much appreciated, Thanks in advance. Reply | Quote

hoc thiet ke thoi trang   2012-05-20 12:34:06 nice tut, thnaks for post Reply | Quote

zhandos - Wordpress   2012-05-25 18:24:40 Hello! Why this script wasn't work in Wordpress? Reply | Quote

John - Fading out header txt   2012-06-03 20:22:35 Hey, is there any way to fade out the #headertxt content? I managed to get it fading in, and also fading out, but when it fades out, you see the text changing to the next slide before the fade finishes. I guess the fade animation has to happen first, then the text to change to next slide, before fading back in? Any help appreciated. So far I have: // Hide the header text $("#headertxt".fadeOut({"display" : "none"}); // Set the new header text $("#firstline".html(photoObject.firstline); $("#secondline" .attr("href", photoObject.url) .html(photoObject.secondline); $("#pictureduri" .attr("href", photoObject.url) .html(photoObject.title); // Fade out the current container // and display the header text when animation is complete $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".fadeIn({"display" : "block"}); animating = false; }, 500); }); }; Reply | Quote

paul_poland   2012-08-22 14:00:42 try this, it works for me : ) Quote: $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".fadeIn({"display" : "block"}); animating = false; }, 500); }); $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt".fadeOut({"display" : "block"}); animating = false; }, 5000); }); Reply | Quote

Estibens Manchego - Control Options   2012-06-04 14:47:21 If you could implement controls 1 -2 -3 - 4 ... depending on the amount of images that exist .... thanks Reply | Quote

Estibens Manchego - controls   2012-06-04 14:48:11 If you could implement controls 1 -2 -3 - 4 ... depending on the amount of images that exist .... thanks Reply | Quote

Shane - re: Slide not fade   2012-06-05 19:59:59 Can the images slide in, rather than fade in? I am really hoping so! Thanks in advance for your help. If Anyone else knows how to change the mode from fade to slide, please feel free to give it a shot. BEST!!!! Reply | Quote

Mark - Stretching Images to fullscreen   2012-06-06 20:51:28 Has anyone managed to STRETCH the images to FULLSCREEN?? I'm able to resize the image container, but am struggling to target just the image Thoughts?? Thanks Reply | Quote

Chris - resize images to div   2012-06-17 15:12:47 Anyone figured out how to make the images resize to fit the div as i shrink the browser window. so if divs minwidth=400px the image will shink to match? thanks Reply | Quote

chris   2012-06-27 19:03:22 any suggestions?? thanks Reply | Quote

chris   2012-06-27 19:23:48 any ideas?? Reply | Quote

Williams   2012-06-25 02:37:27 thanks share, great tutorial, can I let the background images slide in from left to right, thanks. Reply | Quote

janneke - link in blank page   2012-06-27 14:19:59 Hi Marco, I would like to use your script it's really nice, Just one question, the links in the slideshow open in the parent page. I would like them to open in a blank page. Could you, or anyone else help out on that? Kind regards and keep up the good work, Reply | Quote

Garyb - Links from the images   2012-06-29 14:56:54 Great script Marco, is there a way to add links to the images themselves instead of the first and second line, so that a viewer can click anywhere on the image to be taken to a specific url Reply | Quote

Carlos - resize to full screen   2012-06-30 22:37:03 Firstable,, thanks Marco for share this super-nice slideshow, i tried anothers and this is the best because its performance was good in all browsers (tested in Chrome, FF and IE. Like some people in this group i pretend a full-resized images to fit any resolution, but the only way i founded was adding this in the javascript code: "background-size" : "cover", or "background-size" : "100%", inside the: // Set the background image of the new active container $("#headerimg" + activeContainer).css({ It works fine in Chrome and FF, but not in IE8 (dont know why). If any one one knows a better solution for a full resizing images, pls comment. Thanks. Reply | Quote

yek - Thank you   2012-07-05 07:38:03 it's easy and usefull thank you Reply | Quote

Jazz - thanks   2012-07-07 07:46:22 Thank you, Your post is great... One question, what is difference between: ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin; padding;} AND *{margin; padding;} Reply | Quote

ysai Java - About Responsive   2012-07-13 07:22:10 hi Marco Kuiper! THanks a lot for the codes. my problem is that i have to replace the images in the 320px viewport. please you help me.? cheers! Reply | Quote

PVE   2012-07-19 19:29:35 Really nice !! One question : how to modify text color ? (I want to change the red). Thanks a lot ! Reply | Quote

Patrick - Thanks for a great job   2012-07-20 18:18:02 Great tutorial and great work here. I intend to build a website with changing top background and your tutorial is really explanatory. I will upload a link to my completed project. Your tutorial really give me an understanding on how to start. Thanks, I will be visiting often. Reply | Quote

Even River - Great work! I will use it in my theme!   2012-07-27 00:24:21 Thanks, it's a great work, I will use it in my new theme. Once done, I'll post that here! Reply | Quote

Nguyen Vu - Help me! (sorry if i disturb you)   2012-07-27 15:50:45 Hi! My name Nguyen Vu, I'm from Viet Nam! I just visited the website from www.csc.com and wanted to know how to create the slideshow header that's on top of the page, i'm very like it and i want somebody who can help me. you're one, and i wish you can help me for that problem! Thanks so much! Reply | Quote

Nguyen Vu - Help me! (sorry if i disturb you)   2012-07-27 15:51:28 Hi! My name Nguyen Vu, I'm from Viet Nam! I just visited the website from www.csc.com and wanted to know how to create the slideshow header that's on top of the page, i'm very like it and i want somebody who can help me. you're one, and i wish you can help me for that problem! Thanks so much! Reply | Quote

Nguyen Vu - Need Help, help me plz   2012-07-27 15:54:13 Hi! My name Nguyen Vu, I'm from Viet Nam! I just visited the website from www.csc.com and wanted to know how to create the slideshow header that's on top of the page, i'm very like it and i want somebody who can help me. you're one, and i wish you can help me for that problem! Thanks so much! Reply | Quote

Nguyen Vu - Need Help, help me plz   2012-07-27 15:54:57 Hi! My name Nguyen Vu, I'm from Viet Nam! I just visited the website from www.csc.com and wanted to know how to create the slideshow header that's on top of the page, i'm very like it and i want somebody who can help me. you're one, and i wish you can help me for that problem! Thanks so much! Reply | Quote

Francesco - Great!!!   2012-08-01 09:37:28 It's amazing, i think I'll use it soon! Great job! Reply | Quote

Daniel - Direct slide navigation buttons   2012-08-03 09:44:17 Hi Marco, Is there anyway we can have buttons that navigate to a specific slide instead of just backwards, forwards and pause. something like < 1 2 3 4 5 6 > ? Some kind of simple jQuery perhaps that will just forward us to a specified slide? Thanks in advance. Daniel Reply | Quote

Hyperdrive_Boom - Hyperlink on background image   2012-08-09 14:20:11 How can I put a hyperlink on each of the images? Reply | Quote

Hyperdrive_Boom - Hyperlink on background image   2012-08-09 14:21:34 How can I make each of the images a hyperlink? Reply | Quote

Lowercase - Latest version of JQuery issue   2012-08-13 16:35:48 I realise this is an old thread - but any way to get this running with the latest version of JQuery? the script breaks unless you use jquery Vers 1.4.1. Reply | Quote

bmwthaiclub - nice   2012-08-16 15:23:52 Really nice !! Reply | Quote

Alex - Web Design Cardiff - Fade in text   2012-08-23 12:56:50 I got the text to fade in by changing line 141 to... $("#headertxt".fadeIn('slow').css({"display" : "block"}); many thanks for this example, will be using it in an upcoming site. FYI, working with the latest jQuery for me, no issues. Thanks, Alex. Reply | Quote

João Moura - Great job, thanks   2012-08-28 15:03:13 I've done something similar, but with the possibility to customize the text in each image, and added a little slide effect on them. If you want you can see a small little example in my blog Also i've downloaded your version, love the control buttons. Reply | Quote

Website Desinger Cardiff - My preloading images   2012-09-12 11:02:25 Code: //get url minus page var loc = window.location.pathname; var hostname = loc.substring(0, loc.lastIndexOf('/')); function preload(files, cb) { var len = files.length; $($.map(files, function(f) { return ''; }).join('')).load(function () { if(--len===0) { cb(); } }); } I then changed the slider from running on page load to it being called, i called it bigslider then you can simply call the two functions on page load. Code: // preload images then run bigslider preload(["/images/norway3.jpg", "/images/africa2.jpg", "/images/hongkong.jpg"], function() { /* Code here is called once all files are loaded. */ BigSlider(); //Call BigSlider Reply | Quote

Website Desinger Cardiff   2012-09-12 11:05:52 BAH! ruddy comment thing took out half my code, if anyone needs a copy of my script that fades the text and preloads images before running the slider contact me via my website. Reply | Quote

Raghavendra - display in fullscreen   2012-09-13 09:08:21 I very much liked this slideshow with texts.Please advise me is it possible to display the slideshow images in full screen mode, if so the code please.I also want to display the text at different places on each image is it possible to customise. I am quite new to java and jquery hence I request you to please guide me the code required to change. Thanks Reply | Quote

Loyd - Beautiful advanced jQuery background image slidesh   2012-09-18 15:24:42 My family all the time say that I am wasting my time here at web, however I know I am getting familiarity daily by reading thes fastidious articles or reviews. Kamagra is a version of sildenafil citrate which is popularly known for the treatment of erectile dysfunction. The low cost and high performing medicine has made the market itself and thus is has suppressed the well known Viagra that has been continued till the date. Reply | Quote

chiago - background change slideshow jquery   2012-10-01 03:43:41 http://tinkumax.blogspot.com/2012/09/web-site-background-change-effect.html working fine with 3 easy steps Reply | Quote

nick - Simple preload   2012-10-02 18:47:54 Excellent tutorial! For everyone who wants a simple jQuery image preload - Place this after the array with images: Code: $(photos).each(function() { var image = $('').attr('src', this.image); }); Reply | Quote

ken   2012-10-04 16:34:57 hey marco - awesome slider. maco, is there any way to delay the appearnce of the second line of the caption after the first (so there's a pause between firstline and secondline? thanks for your work Reply | Quote

May - Graphic Designer   2012-10-06 17:29:56 Beautiful! This is exactly what I was looking for! I'd like to use it for my portfolio site. One thing I'd like to do is instead of the next and previous controller, I'd like to use a series of dots or bullets which represent each image. Can anybody help me? Reply | Quote

Samuel - Beautiful advanced jQuery background image slidesh   2012-10-11 16:15:18 Howdy I am so thrilled I found your webpage, I really found you by mistake, while I was researching on Bing for something else, Regardless I am here now and would just like to say thank you for a incredible post and a all round exciting blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have saved it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the fantastic jo. Reply | Quote

Rosemary - Beautiful advanced jQuery background image slidesh   2012-10-11 17:11:23 I wanted to thank you for this wonderful read!! I certainly loved every bit of it. I've got you book marked to check out new things you post… Reply | Quote

Jayson - Beautiful advanced jQuery background image slidesh   2012-10-13 03:07:19 Please let me know if you're looking for a author for your weblog. You have some really great posts and I think I would be a good asset. If you ever want to take some of the load off, I'd really like to write some content for your blog in exchange for a link back to mine. Please send me an e-mail if interested. Regards! Reply | Quote

Celeste - Beautiful advanced jQuery background image slidesh   2012-10-14 10:32:00 I do not know if it's just me or if everybody else experiencing issues with your website. It seems like some of the written text on your posts are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This may be a problem with my web browser because I've had this happen previously. Appreciate it Reply | Quote

Lorri - Beautiful advanced jQuery background image slidesh   2012-10-16 09:32:08 Thank you for sharing your thoughts. I really appreciate your efforts and I am waiting for your next post thanks once again. Reply | Quote

Krystal - Beautiful advanced jQuery background image slidesh   2012-10-17 06:13:37 Heya! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no back up. Do you have any solutions to protect against hackers? Reply | Quote

Rosie - Beautiful advanced jQuery background image slidesh   2012-10-17 20:37:27 What's up, of course this article is genuinely good and I have learned lot of things from it regarding blogging. thanks. Reply | Quote

web dizajn - web dizajn   2012-10-20 19:37:06 Here really has some great sliders, thanks for the effort in selecting these amazing sliders. Reply | Quote

web dizajn - brandz   2012-10-20 19:38:47 Here really has some great sliders, thanks for the effort in selecting these amazing sliders... Reply | Quote

web dizajn - web dizajn   2012-10-20 19:40:41 Here really has some great sliders, thanks for the effort in selecting these amazing sliders... Reply | Quote

Mallory - Beautiful advanced jQuery background image slidesh   2012-11-05 09:57:19 I blog frequently and I seriously thank you for your information. The article has really peaked my interest. I will bookmark your site and keep checking for new details about once per week. I opted in for your Feed too. Reply | Quote

Elsie - Beautiful advanced jQuery background image slidesh   2012-11-18 02:54:23 Thanks designed for sharing such a fastidious thinking, post is nice, thats why i have read it completely Reply | Quote

Michel - Blog spam galore   2012-11-18 06:06:55 Sheez, seems all you get here is spam lately. If I search for https://www.google.com/search?q=Howdy+I+am+so+thrilled+I+found+your+webpage,+I+really+found+you+by+mistake,+while+I+was+researching+on+Bing+for+something+else,+Regardless I get tons of results. Reply | Quote

sank - How to call image dynamically in asp.net   2012-11-23 05:48:02 thanks for nice Jquery background image slideshow. how can i use it dynamically in asp.net ? please help me. Reply | Quote

Keya Directory - amazing slider   2012-11-27 12:40:18 Here really has some great sliders, thanks for the effort in selecting these amazing sliders... The article has really peaked my interest. I will bookmark your site and keep checking for new details about once per week. I opted in for your Feed too. Reply | Quote

ray - newbie   2012-11-28 16:35:50 help me... how to change the images on slides? thx Reply | Quote

Vusal   2012-12-09 16:03:59 help mee.. internet explorer dont working.. Reply | Quote

Simplescript - Wordpress solutions   2012-12-23 15:03:47 Solution for Wordpress: just remove "z-index" : currentZindex from line 115 in script.js Works for me ! Reply | Quote

Simplescript - Wordpress solutions   2012-12-23 15:04:32 Solution for Wordpress: just remove "z-index" : currentZindex from line 115 in script.js Works for me ! Reply | Quote

Simplescript - Wordpress solutions   2012-12-23 15:05:34 Solution for Wordpress: just remove Code: "z-index" : currentZindex from line 115 in script.js Works for me ! Reply | Quote

Bart31 - Wordpress solutions once again   2012-12-23 15:08:06 Solution for Wordpress: just remove Code: "z-index" : currentZindex from line 115 in script.js Works for me ! Reply | Quote

Pedro - div on background   2012-12-30 05:03:24 I thank you for the work. It is excellent I need to add a div on backgroun but when this happens the next picture disappears. As should do.? Reply | Quote

Pedro - div on background   2012-12-30 05:08:37 I thank you for the work. It is excellent I need to add a div on background but when this happens the next picture disappears. As should do.? http://www.jfmaquinarias.com/generadores.html the div is hidden by me to change the background image. as I do so that this remains always visible? Regards Reply | Quote

JJ - Free?   2013-01-04 00:29:38 Beautiful! I'd love to use this script on my website but wasn't sure if this was free or what..... haha? Reply | Quote

Mian Haider - Freelancer   2013-01-07 20:58:20 This is really a useful work done in jQuery. I love the way the conversation went. I really was having hard time but reading all the comments helped me a lot. Thanks again.... Reply | Quote

Mian Haider - Freelancer   2013-01-07 20:59:05 This is really a useful work done in jQuery. I love the way the conversation went. I really was having hard time but reading all the comments helped me a lot. Thanks again.... Reply | Quote

Mula - Instead of fading in looking for a way to slide fr   2013-01-10 14:59:30 Hey! I very much like this background show! Thanks a lot for publishing! But I want to work with landscape pictures and I am looking for a way of bringing the images from left to right into the container. Would you mind to show how to do this? Thanks a lot! Reply | Quote

Mula - Instead of fading in looking for sliding in from t   2013-01-10 15:04:43 Hello! I very much like this background slight show. Thanks for publishing it! But I want to work with landscape pictures and thought it is a nicer way in bringing the images from the left to the right side and not on top of each other. Does anybody know how to do this? Thanks! Reply | Quote

Merle - Beautiful advanced jQuery background image slidesh   2013-01-14 16:57:15 I have read so many content concerning the blogger lovers however this post is in fact a good article, keep it up. Reply | Quote

Lilian - Thanks so much!   2013-01-14 23:58:19 Beautiful work! Thanks so much for sharing. Reply | Quote

elporfirio - Better the original code   2013-01-15 19:49:16 for start the original code is the best, after domain we can use the plugin. Thanks I use it Reply | Quote

Abel - Beautiful advanced jQuery background image slidesh   2013-01-19 02:01:53 Awesome issues here. I am very satisfied to look your article. Thanks a lot and I am taking a look forward to touch you. Will you kindly drop me a e-mail? Reply | Quote

Tonya - Beautiful advanced jQuery background image slidesh   2013-01-20 12:38:05 When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove me from that service? Thanks a lot! Reply | Quote

Glen - Beautiful advanced jQuery background image slidesh   2013-01-21 03:08:05 Wow, superb weblog layout! How long have you been blogging for? you made running a blog glance easy. The entire look of your site is great, as neatly as the content! Reply | Quote

Ali - Beautiful advanced jQuery background image slidesh   2013-01-21 13:13:46 My brother suggested I might like this web site. He was totally right. This post actually made my day. You cann't imagine just how much time I had spent for this info! Thanks! Reply | Quote

chadd - Firefox Problem   2013-02-01 05:49:06 Nice work I am currently having a problem getting this to work in Firefox & IE anyone can help ? http://timbertopdesigns.com.au/dev-site/index.html Reply | Quote

chadd - Firefox Problem   2013-02-01 05:58:22 http://timbertopdesigns.com.au/dev-site/index.html I can't get the above to work in ie9 or Firefox any ideas ? Reply | Quote

chadd - Firefox Problem   2013-02-01 05:59:28 http://timbertopdesigns.com.au/dev-site/index.html I can't get the above to work in ie9 or Firefox any ideas ? Reply | Quote

Kathie - Beautiful advanced jQuery background image slidesh   2013-02-01 20:08:00 Hello mates, pleasant paragraph and pleasant arguments commented at this place, I am genuinely enjoying by these. Reply | Quote

Precious Fab-cast Pvt. Ltd - Precious Fab-cast Pvt. Ltd   2013-02-13 11:09:15 Thanks for this tutorial! It Reply | Quote

Precious Fab-cast Pvt. Ltd - Precious Fab-cast Pvt. Ltd   2013-02-13 11:14:41 Greats! Reply | Quote

Paul - Direct slide navigation buttons   2013-02-20 11:58:17 Marco, Great slider!!! managed to get in integrated nicely within wordpress, has anyone managed to add navigation links to individual slides e.g 1 , 2 , 3 , 4 ? Thanks in Advance Paul Reply | Quote

Virgilio - Secondline   2013-02-21 18:50:26 How to put the second line to call an image and not text? Reply | Quote

Virgilio - Secondline   2013-02-21 18:53:14 How to put the second line to call an image and not text??? Reply | Quote

Virgilio   2013-02-22 13:05:10 Hello I'm from Brazil, and I put the 'secondline' to draw an image and not text? thank you Reply | Quote

Virgilio - Secondline   2013-02-22 13:06:02 Hello I'm from Brazil, and I put the 'secondline' to draw an image and not text? thank you Reply | Quote

Soon - Beautiful advanced jQuery background image slidesh   2013-03-01 10:23:56 WOW just what I was looking for. Came here by searching for design Reply | Quote

Kerrie - Beautiful advanced jQuery background image slidesh   2013-03-02 06:58:59 Good day! I could have sworn I've been to this website before but after reading through some of the post I realized it's new to me. Anyways, I'm definitely delighted I found it and I'll be bookmarking and checking back frequently! Thanks! Reply | Quote

Ampoule Filling Machines - Ampoule Filling Machines   2013-03-02 13:02:57 Awesome! Thanks for Sharing... Reply | Quote

Ampoule Filling Machines - Ampoule Filling Machines   2013-03-02 13:04:00 Awesome! Thanks for Sharing... Reply | Quote

Selena - Beautiful advanced jQuery background image slidesh   2013-03-11 09:15:25 Your own write-up features confirmed necessary to us. It Reply | Quote

Dezoar - Trying to update jQuery version   2013-03-14 08:12:25 I realize this is an old thread but I just thought I'd ask for help just in case Marco still checks this site. I tried updating my jQuery to 1.9.1 from 1.4.2, and I noticed that whenever I did that, the pause/play button disappears. Everything else still works though. Is there something I need to update in the code, too? Reply | Quote

Mitch   2013-05-01 04:47:29 I am having this same problem in IE and Chrome (did not check safari)... Reply | Quote

Mitch   2013-05-01 04:49:01 I am having this same problem. Reply | Quote

Micah - Beautiful advanced jQuery background image slidesh   2013-03-18 03:11:26 What's up friends, fastidious post and pleasant arguments commented here, I am in fact enjoying by these. Reply | Quote

Shagun Bhardwaj - not able to see pictures when I implement it   2013-03-31 06:12:12 I have customized the slideshow with some new pictures but am not able to see the picstures in ie and chrome. I can only see those in Mozilla Firefox, any idea why ? Reply | Quote

Shagun Bhardwaj - not able to see pictures when I implement it   2013-03-31 06:14:06 Hi, I have customised the slider with my owm images. Now I am not able too see thode pictures in IE or chrome when I upload my app to the cloud. I am only able to see th pics in Mozilla firefox. any idea y ? Regards, Shagun Reply | Quote

Richard - Beautiful advanced jQuery background image slidesh   2013-03-31 10:47:00 Your report offers established helpful to me. It Reply | Quote

Deborah - Beautiful advanced jQuery background image slidesh   2013-04-08 23:25:23 Hey there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no back up. Do you have any solutions to stop hackers? I'm pretty pleased to find this page. I wanted to thank you for ones time due to this wonderful read!! I definitely really liked every little bit of it and I have you saved as a favorite to check out new stuff in your web site. Can I simply just say what a relief to discover somebody who really understands what they're talking about on the internet. You actually understand how to bring a problem to light and make it important. More people ought to read this and understand this side of your story. I was surprised that you're not more popular since you surely have the gift. Very nice write-up. I certainly appreciate this site. Thanks! It Reply | Quote

emre demir - Great Job!   2013-04-13 19:07:28 good job dude! marcofolio.net if you were a girl i would marry you ! shhh dont tell to my gf! Reply | Quote

Rodger - Beautiful advanced jQuery background image slidesh   2013-04-17 01:51:34 I Reply | Quote

Victor - Beautiful advanced jQuery background image slidesh   2013-04-17 02:42:32 Some places will laser engrave on black marble, too. While firing, pull your mouse toward the bottom left corner of your mousepad.  10-bit resolution on all analog fader controls. Reply | Quote

Eloise - Beautiful advanced jQuery background image slidesh   2013-04-18 08:44:48 If you desire to increase your know-how simply keep visiting this web page and be updated with the newest news update posted here. Reply | Quote

Evan Price - How to make the transparent PNGs   2013-04-18 16:55:52 I'm wondering how did you make the transparent PNG for the header file (headerbg.png)? I'd like to change the colour but whenever I try, it becomes a solid colour with no opacity. Thanks! Reply | Quote

Andy   2013-04-24 22:53:08 I am assuming you want to change the white color, if so you can try this. Open Microsoft Office PowerPoint > make a box > right click on the box > click on "Format shape > click on "Line color" and chose "No line" > then click on "Fill" > click on the color you want then move the slider of how much transparency you want > once you have the desired transparency click on "Close" > right click on the box and click on "Save as Picture" > make sure it says "PNG Portable Network Graphic Format .png". Reply | Quote

Andy - AFN   2013-04-24 22:54:20 I am assuming you want to change the white color, if so you can try this. Open Microsoft Office PowerPoint > make a box > right click on the box > click on "Format shape > click on "Line color" and chose "No line" > then click on "Fill" > click on the color you want then move the slider of how much transparency you want > once you have the desired transparency click on "Close" > right click on the box and click on "Save as Picture" > make sure it says "PNG Portable Network Graphic Format .png". Reply | Quote

Andy - AFN   2013-04-24 22:55:06 I am assuming you want to change the white color, if so you can try this. Open Microsoft Office PowerPoint > make a box > right click on the box > click on "Format shape > click on "Line color" and chose "No line" > then click on "Fill" > click on the color you want then move the slider of how much transparency you want > once you have the desired transparency click on "Close" > right click on the box and click on "Save as Picture" > make sure it says "PNG Portable Network Graphic Format .png". Reply | Quote

Andy   2013-04-24 22:58:55 Sorry for posting it twice, your site was giving me an error so I refreshed the page. Please delete the comment that I have posted twice. Reply | Quote

Ismael - Beautiful advanced jQuery background image slidesh   2013-04-18 19:00:44 It's awesome for me to have a web page, which is good for my know-how. thanks admin Reply | Quote

Ola - Beautiful advanced jQuery background image slidesh   2013-04-19 23:16:44 I drop a leave a response when I especially enjoy a post on a site or if I have something to contribute to the conversation. Usually it's a result of the fire communicated in the article I browsed. And on this post Beautiful advanced jQuery background image slideshow. I was moved enough to post a thought I do have a couple of questions for you if you usually do not mind. Is it just me or does it seem like a few of these comments appear like they are coming from brain dead visitors? :-P And, if you are writing at additional online sites, I'd like to follow you. Would you make a list every one of your shared sites like your linkedin profile, Facebook page or twitter feed? Reply | Quote

Sanford - Beautiful advanced jQuery background image slidesh   2013-04-20 03:56:56 Terrific article! That is the kind of information that are supposed to be shared across the web. Shame on Google for now not positioning this put up higher! Come on over and visit my website . Thanks =) Reply | Quote

Janelle - Beautiful advanced jQuery background image slidesh   2013-04-20 15:36:02 This paragraph will help the internet viewers for building up new web site or even a blog from start to end. Reply | Quote

Sherrill - Beautiful advanced jQuery background image slidesh   2013-04-23 21:53:24 Greetings from Carolina! I'm bored at work so I decided to check out your blog on my iphone during lunch break. I really like the knowledge you provide here and can't wait to take a look when I get home. I'm amazed at how quick your blog loaded on my cell phone .. I'm not even using WIFI, just 3G . . Anyways, very good blog! Reply | Quote

Linwood - Beautiful advanced jQuery background image slidesh   2013-04-24 07:44:59 Please let me know if you're looking for a article writer for your site. You have some really good posts and I think I would be a good asset. If you ever want to take some of the load off, I'd love to write some articles for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Many thanks! Reply | Quote

Adolph - Beautiful advanced jQuery background image slidesh   2013-04-24 09:42:09 The post offers confirmed helpful to myself. It Reply | Quote

Andy   2013-04-24 23:07:36 Just to let everyone know if you try posting your comment, after pressing send and you see this error instead "Ajax request failed." don't worry your comment has been posted just go to your address bar and press enter then go to the reply or at the bottom of your page and you should see your comment. Reply | Quote

Franklin - Beautiful advanced jQuery background image slidesh   2013-04-25 09:07:55 Having read this I thought it was rather informative. I appreciate you spending some time and effort to put this content together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile! Reply | Quote

Cathy - Beautiful advanced jQuery background image slidesh   2013-04-25 15:06:24 Why visitors still use to read news papers when in this technological world the whole thing is accessible on web? Reply | Quote

Fidel - Beautiful advanced jQuery background image slidesh   2013-04-26 21:56:59 If your dress is adorned with a beautiful pattern as they so often are, I'd recommend some simple earrings such as diamond studs or delicate diamond drops. From couture one-of-a-kind dresses to breezy ready-to-wear styles, these five up-and-coming designers represent the next class of high-style designer names to remember. Another idea to save on your wedding is to shop for related items on non-peak months, when merchandise is in less demand. Reply | Quote

Gidget - Beautiful advanced jQuery background image slidesh   2013-04-27 20:25:04 First of all I want to say fantastic blog! I had a quick question which I'd like to ask if you don't mind. I was curious to know how you center yourself and clear your head prior to writing. I've had a difficult time clearing my thoughts in getting my thoughts out there. I truly do take pleasure in writing however it just seems like the first 10 to 15 minutes are wasted just trying to figure out how to begin. Any ideas or hints? Many thanks! Reply | Quote

Louise - Beautiful advanced jQuery background image slidesh   2013-04-28 17:50:20 Do you mind if I quote a few of your articles as long as I provide credit and sources back to your website? My blog is in the exact same area of interest as yours and my users would definitely benefit from a lot of the information you present here. Please let me know if this ok with you. Cheers! Reply | Quote

Rick - Stop at first frame   2013-04-29 15:40:43 Great code, thanks a million. I want to do one tweak to it, I'm looking for changes to the code that I could implement which would have the first image load but NOT begin the slideshow until the visitor clicks the play button. And once the slideshow plays through and returns to the first image I'd like it to stop there again, waiting for the play button to be clicked.... any ideas? Reply | Quote

Rick - Stop at first frame   2013-04-29 15:41:45 Great code, thanks a million. I want to do one tweak to it, I'm looking for changes to the code that I could implement which would have the first image load but NOT begin the slideshow until the visitor clicks the play button. And once the slideshow plays through and returns to the first image I'd like it to stop there again, waiting for the play button to be clicked.... any ideas? Reply | Quote

Genevieve - Beautiful advanced jQuery background image slidesh   2013-05-02 21:47:35 Your report has verified helpful to myself. It Reply | Quote

Jared - Beautiful advanced jQuery background image slidesh   2013-05-06 00:00:38 Your own report provides established useful to me personally. It Reply | Quote

Garry - Beautiful advanced jQuery background image slidesh   2013-05-06 15:56:21 Your current write-up offers verified beneficial to me. It Reply | Quote

Ellis - Beautiful advanced jQuery background image slidesh   2013-05-09 19:52:39 Amazing issues here. I am very glad to see your article. Thank you a lot and I am having a look forward to contact you. Will you kindly drop me a mail? Reply | Quote

Marco - Beautiful advanced jQuery background image slidesh   2013-05-12 08:45:36 Your own article provides established beneficial to me personally. It Reply | Quote

Karri - Beautiful advanced jQuery background image slidesh   2013-05-13 00:14:12 Everything is very open with a clear description of the challenges. It was truly informative. Your website is very helpful. Thank you for sharing! Reply | Quote

Maurice - Beautiful advanced jQuery background image slidesh   2013-05-16 15:43:58 I wanted to thank you for this excellent read!! I certainly loved every little bit of it. I have you bookmarked to look at new stuff you post Reply | Quote

Luciana - Beautiful advanced jQuery background image slidesh   2013-05-19 19:27:53 Hey there! This is kind of off topic but I need some guidance from an established blog. Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty quick. I'm thinking about making my own but I'm not sure where to start. Do you have any points or suggestions? Cheers Reply | Quote

Jolie - Beautiful advanced jQuery background image slidesh   2013-05-22 03:20:22 Heya just wanted to give you a quick heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different web browsers and both show the same results. Reply | Quote

Kate - Beautiful advanced jQuery background image slidesh   2013-05-22 07:02:40 I almost never leave responses, but i did some searching and wound up here Beautiful advanced jQuery background image slideshow. And I do have a couple of questions for you if it's allright. Could it be just me or does it look like a few of these responses look like left by brain dead people? :-P And, if you are writing at additional social sites, I would like to keep up with everything new you have to post. Would you list of the complete urls of all your communal pages like your Facebook page, twitter feed, or linkedin profile? Reply | Quote

Ingthor Ingolfsson   2013-05-22 16:38:27 one BIIIIG question! As beautiful this slider is - I don´t whant my clients constantly calling me because they want to insert a new photo to the slider.... So dumping all the info and photos into a javasctipt is not a good idea unless you´re making a website for yourself It really should be a php/mysql version of this so developers (making websites for clients) can use this as well Reply | Quote

Shona - Beautiful advanced jQuery background image slidesh   2013-05-23 14:11:45 I was wondering if you ever thought of changing the structure of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two pictures. Maybe you could space it out better? Reply | Quote

Bridget - Beautiful advanced jQuery background image slidesh   2013-05-24 12:36:31 Link exchange is nothing else however it is just placing the other person's web site link on your page at suitable place and other person will also do same in support of you. Reply | Quote

Rene - Beautiful advanced jQuery background image slidesh   2013-05-24 22:54:56 When someone writes an piece of writing he/she maintains the thought of a user in his/her brain that how a user can be aware of it. So that's why this paragraph is great. Thanks! Reply | Quote

Samira - Beautiful advanced jQuery background image slidesh   2013-05-25 17:40:33 Hey there I am so delighted I found your web site, I really found you by accident, while I was looking on Yahoo for something else, Regardless I am here now and would just like to say thanks for a fantastic post and a all round interesting blog (I also love the theme/design), I don't have time to browse it all at the minute but I have saved it and also added your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the great job. Reply | Quote

Lewis - Beautiful advanced jQuery background image slidesh   2013-05-25 18:15:19 Hello my friend! I wish to say that this article is awesome, great written and come with almost all vital infos. I'd like to peer extra posts like this . Reply | Quote

Katrin - Beautiful advanced jQuery background image slidesh   2013-05-25 19:02:37 Undeniably consider that which you stated. Your favorite reason appeared to be on the net the simplest factor to bear in mind of. I say to you, I certainly get annoyed at the same time as other folks consider issues that they just don't recognize about. You managed to hit the nail upon the top as well as outlined out the whole thing without having side-effects , people could take a signal. Will probably be again to get more. Thanks Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.