I assume you had read the first noobslide tutorial I wrote.
Part 1: Creating our html document
After you downloaded noobslide archive, let’s create a html document named sample7.html in the class.noobSlide.js directory.
We have to include the Javascript classes and the stylesheets in the head section of the document:
<link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="_mootools.js"></script> <script type="text/javascript" src="_class.noobSlide.js"></script>
Now, let’s create the html for the slideshow. Paste the code below in the body section of your sample7.html file.
<h2>Sample 7</h2> <div class="sample"> <div class="mask6"> <div id="box7"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> <div id="thumbs7"> <div class="thumbs"> <div><img src="img1.jpg" alt="Photo Thumb" /></div> <div><img src="img2.jpg" alt="Photo Thumb" /></div> <div><img src="img3.jpg" alt="Photo Thumb" /></div> <div><img src="img4.jpg" alt="Photo Thumb" /></div> <div><img src="img5.jpg" alt="Photo Thumb" /></div> <div><img src="img6.jpg" alt="Photo Thumb" /></div> <div><img src="img7.jpg" alt="Photo Thumb" /></div> <div><img src="img8.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </p> </div> </div>
Let’s have a look at the html we just wrote. We create 3 different kind of data: Thumbs, pictures and buttons. This html part isn’t really good in terms of semantics, but it will be ok for the exemple. As an exercise, why not trying to get the same result with a better html structure?
Part 2: The Javascript
Here’s the coolest part: Javascript. In order to animate our content, we have to include the followig script in the head section of our html document, or put it in a separate .js file, which is a better solution in my opinion.
<script type="text/javascript">
window.addEvent('domready',function(){
var startItem = 3; // First item to be displayed
var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
var hs7 = new noobSlide({
box: $('box7'),
items: [0,1,2,3,4,5,6,7],
handles: $ES('span','thumbs_handles7'),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*60-568);
},
startItem: startItem
});
hs7.walk(0);
});
</script>
That’s all. You now have a fully functionnal slideshow gallery which will for sure enhance your website!
Any questions and/or comments? Ask us!
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
52 Comments
Ok so im no doubt doing somthing wrong but this doesnt work for me. I have followed through twice and both times it end up looking like this: http://www.diffused.co.nz/redkross/slideproblem.JPG Any ideas?
Thanks!
Do you created the sample7.html (or whatever you call it) inside the noobslide directory? The thumbs don’t display, so I think the first thing to do is to find why they didn’t display.
You should upload your work, so i’ll be able to check the source and help you even more.
I agree with jbj’s idea, to check if the problem is the image use firebug
Well I have put it inside the class.noobSlide.js directory created by the class.noobSlide.js.zip if thats what you mean? Also the thumbs are there they are just hiding behind the .gif if i rename the the .gif so it cant find them the thumbnails appear.
I grabbed the firebug program but at present I am too dense to figure it out. I will do some reading tonight to figure out what im looking at. I have posted the whole folder up here: http://www.diffused.co.nz/redkross/class.noobSlide.js/
Thanks for your time guys, no doubt it will be some small detail ive over looked but for the life of me I cant find it.
Cheers
yes, i finally find it
look at the line : handles: $ES(’span’,’thumbs_handles7′), the single quote is not really a single quote but a “curl quote” ! if you correct that it works perfectly.
i hope it will works for you
Good job X-OR
I had a similar problem with curly quotes on Hack Wordpress, and that’s really boring…
Thanks X-OR,
You must have the eyes of a ninja lol. Dont know whow that happened as I cut and paste the code. Well any ways im on the way now.
Thanks again for all your help guys
Bad news, its me again.
Ok so Ive got it PERFECT in ff and then we open in ie 6 or 7…. cruddy (no surpirses).
Im trying to get it to play nice on ie with out using a diffrent style sheet. If anyone has already figured this out please let us know.
Thanks.
I’m not surprised at all! The css I used in theses tutorials came from the official site, with no modifications. The 7th sample didn’t work great in IE6 but it’s ok.
I’ll try to find what’s the problem.
Ok I think I have found the easiest fix, in style.css under :
#thumbs7 .thumbs div, #thumbs_handles7 span{
I added the line:
Left: 0;
That seems to get everything lined up about right, the thumb overlay looks about 2px to the right but its quite close.
Hi man everything its cool for me and works better i just got a problem i can´t make that my links open in a new window. where i can give it the target? (_blank, _self,etc) my problem i directly in the sample 5.
thanks and i hope your answer..
Hi andres,
Some html is injected in the Javascript part . Look on the onWalk method, you’ll see the <a>, just add the target you want and you’re done
This was good information. I’ve passed your url to a few of my associates. Take care. Btw, my blog is dofollow, stop by and grab a link. RapidInternet Inc.
Is it possible with noobslide to preload the images in the slideshow and show an loading gif? Thanks for your help.
I’m pretty sure it’s possible, but to be honest I don’t know how to do right now. Maybe X-OR knows more about that?
Hmmm ok so my fix has 1 little problem:
In ie6 the last image is shown on the thumbs but is always blank. If you remove the left: 0 line the problem goes away but then the thumbs go all wack again, GRRRRRRRR!
Anyone got any ideas??
I searched a bit but I don’t know. IE6 is very old now, and have many problems with advanced scripts as such as Noobslide.
Hi, I have 12 images. How do I add them all to this gallery. Sample 7 I mean.
hmmm, might be worth having a look at the website where this “tutorial” seems to have been copied from: http://www.efectorelativo.net/laboratory/noobSlide/
@Le Fromage Stink: What you call the “copied tutorial” is the online demo. This article (and the other Noobslide tutorial available here) have been published in order to give more info than the official demos can give to potential users.
Hi, I cannot seem to get the slideshow working. I correct the quotes on the handle and still nothing. It displays the large images in a vertical list and the thumbs are in a horizontal list without any opacity styling.
Any suggestions?
@AXD: Do you have you rcode somewhere online so I can check it out?
Hi there,
Thanks to your tutorials I managed to get some noobSlide action on my site: http://www.vidamedia.es/test1/test-internet
But, it´s not working in IE6 or 7 but working good in FF3 and Safari. Any ideas on how to sort this out would be really great!
Thanks
Dan
ps, Thanks for the tutorials, very useful.
Great tut, I just found noobslide and was looking for some help.
Im still struggling with one thing though, how can use mootools inbuilt Ajax to load the ‘other’ images directly. I dont want to load 300 images in one go, maybe just 4-7 at a time using php, but I would need ajax to load what php returns. Any pointers on where or how to use ajax with this tut? Im using examples 2 which I have modified like flickr photostream and 8 as a content and image slide on the homepage of a new site.
thnkx
Paul
sorry forget my question, i have solved it!
What was your solution dan?!
Hi Tom,
Basically it was down to the mootools library that i had on my site. I use a cms called modx for all my projects and it comes with mootools pre loaded because they have some standard features that use it. Turns out that the version they had loaded didnt work for noobSlide but did work for the accordion. So just a case of using the right version core with the script, my bad!
So this works with IE6 and 7, great. Just the solution i was looking for (was put off by some of the previous comments about IE) thanks for getting back to me dan.
no worries Tom, I think it´s all good, check out the link on my first post to check.
Thank you so much for the tutorials. Both of them worked perfect. I am now off to find out how to change the colors and style using css…wish me luck and let me know if I missed an article about that, thanks again:)
ps…is there a simple way to add the author, time, date, and link overlay of examples 5 and 6 to example seven style gallery, please let me know how to add that overlay info…thank you
The Test Page
http://georgopulosfineart.com/noobslide
Great tutorial!
I am using sample 4 and trying to revise the code so that it reads data from xml and have a pagination to look like this site (http://www.cristianmovila.com). I can get the xml part working, but no idea how to create thepagination. Can you shed some light please?
Thanks in advance!!
Durr, i still don’t know what i’m doing wrong, could someone please upload a correct version of example 7?
I mean, the thumbnails work, I don’t have the ‘ wrong, and i’ve added Left: 0; (whatever that means
) but still, the animation is stuck half way through, and the thumbnails don’t do anything.
(Also tried adding my own version of mootools, (everything checked, Yui compressor) but that didn’t seem to do anything)
Thnx in advance
-Mark
I would like to add a preloader to the images on this example working sample 4 http://behindtheclouds.org/expresso.html but i can’t find out how… anyone knows how to? thanks
Hi all,
How do I get the thumbnails scroll? I want to add more images and when it gets to 12 images the thumbnails disappear.
Has anyone figured out how to change the size of the slides for example 7? I want my slide show to be 850px wide X 235 px high (or something like that). I’d like the total width of the thumbnails to be 850px wide as well. Let’s say there are 8 images, like the example. How do you modify the mask so that it fits the new dimensions? I don’t really understand how the mask works. Anyone know? Thanks in advance!
~Nicole
I tried it with 3 test slides only and here’s what i came up with. I’m not sure how to make the slide move over all the way after clicking a thumbnail. Does this have to do with the startItem values in the javascript?
http://www.nicolearn.com/noobslidetest/index.html
Any ideas? Thanks!
~Nicole
@Nicole: I think it has to do with startItem value like you say, and also with currentItem, I didn’t take a better look to the code, but it seems to be the only way.
Hello! Nice work with the tutorials. I wanted to ask you about a problem I have, I’m integrating Viewer (another class from efectorelativo) inside noobSlide (I know, it’s like packing a box inside itself hehe). It seems to work fine but when I click on the “next” and “previous” links it gets a “JSON is not defined” error. Do you have any idea why this can happen?
@Nicole
Change line 76 of your noobSlide.js:
this.size = params.size
To the width of the content you are sliding
It works!
I did as Tetsuo recommended and changed:
this.size=a.size||900
It was set at 240px as the original, so I changed it to the size I wanted.
Thanks for the help!
~Nicole
I’ve tried to get this working on my site. I’ve used 2 rows of thumbs, so have removed the mask as couldn’t figure how to get it to move to the 2nd row.
The slide works fine in Firefox, Opera and Safari but not in IE6 or IE7. I can’t figure out why.
Would anyone be able to help?
http://www.gratisgadgets.co.uk/proof.php
Following from my comment above, I’ve found that it does sort of work if you click on the space between the thmbnails. But then the last image won’t show.
I’m not sure if this is to do with the javascript or the CSS positioning the spans.
Nice blog…Thanks for the tutorial given…I managed to bring some Noobslide in my site..It really works well…I am very new but still your tutorial teaches me many thing…The tutorial was very clear and easy..Changing styles and color in CSS is nice…How to preload images in Noodslide?
Thanks for the information!!!!
This tutorial is bullshit.. I mean it’s not tutorial at all, it’s just code from example with explanation to copy and paste it. Tutorials explain stuff… and the example at top does not even work.
This photo slideshow is a demonstration of Flash-like behavior… Since this photo gallery uses Noob technology, it eliminates the need for any page refresh as the user pages through the photos…
I like how does this all looks like….i eaven need something like this for my website. The problem i have is that i have no idea where should i paste the codes and stuff…?!? I mean i am a really noob
so i hope u all guys will understand. Is there any possibility that someone explain to me this procedure in a way that you explain something to total beginer?
Thanks…
I have used it foe my wp blog ,it been great.
Getting a bit frustrated here. Not many tutorials out there for noobslide.
Im trying to achieve some sort of combination noobslide.
It´s sort of just a sample 7, but instead of the user controlling the slide with thumb images I want a vertical text menu. Ive tried to change the css and tried variations of both sample 7 and sample 4 but just aint getting it done.
Kinda need to get this thing working it the next couple of days so if anyone got any ide of how to acheive the effect or might suggest an alternative to noobslide, please write.
I managed to solve my problem using the sample 4 slide and simply using the br tag in the “menu”. Had to change a whole lot css and delete some of the web.css that was overridning my other code.
I might not know exactly what the heck im doing, but hey, it worked
I have a problem on this module when i used it to my site.. Can anyone help me find a solution when there are more thumb images? Because the example gives only 8 thumb images, how about if there are many thumb images? thanks in advance..
Ok so im Ultra New at all this and am sort of jumping in head first, but struggling a little. So i think im having the same problem as Format6 had in the beginning with no thumbnails or slide effect working. I know that X-OR said that i need to change a section into a “curl quote” but i have no idea what that even is!!! (i know… stop laughing) Can anyone explain to me how i change it. Ive posted my code below to make things easier. Would really appreciate a little guidance.
Cheers
window.addEvent(’domready’,function(){
var startItem = 3; // First item to be displayed
var thumbs_mask7 = $(’thumbs_mask7′).setStyle(’left’,(startItem*60-568)+’px’).setOpacity(0.8);
var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
var thumbsFx = new Fx.Style(thumbs_mask7,’left’,fxOptions7);
var hs7 = new noobSlide({
box: $(’box7′),
items: [0,1,2,3,4,5,6,7],
handles: $ES(’span’,'thumbs_handles7′),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*60-568);
},
startItem: startItem
});
hs7.walk(0);
});
noobSlide – mootools
window.addEvent(’domready’,function(){
//SAMPLE 1 (auto, every 5 sec)
var nS1 = new noobSlide({
box: $(’box1′),
items: [0,1,2,3,4,5,6,7],
size: 480,
autoPlay: true
});
});
Sample 7
Hi, sorry if this is a dumb question, but how do the thumbnails show up if there are more than 8 of them? Is there some sort of horizontal thumbnail scroller?
I’m looking for something very like this but it’s important it scrolls (if you know what I mean).
Ciao
One Trackback
[...] (07/14/2008): Another noobslide tutorial is available here. Tags: javascript, mootools, noobslide, [...]