At the request of one of our viewers, I’ll show you how to mimic the image functionality seen here. Though, at first glance, it might appear to be difficult, don’t worry! It’s actually quite simple. I’ll show you how.
Day 8: User Request - Image Slides.
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
Bennie
December 8th, 2008
Awesome tutorial!
Juarez P. A. Filho
December 8th, 2008
Outch… This Video Series about jQuey is AMAZING. Thanks a lot Jeffrey. Could you put these videos available for download?
Jeffrey
December 8th, 2008
@Juarez - Yep! I plan on doing that once they’re all done. I think I’ll go to Day 15. I’ll keep everyone posted.
Melvin Walls
December 8th, 2008
Thanks Jeffrey. This is something that would benefit my portfolio(in the works)
Andrew Turner
December 8th, 2008
Hey Jeffery, When you get a chance would you be able to do a tutorial on Jquery Tabs, much like the ones on the Themeforest Homepage and across the TUTs Sites.
Thanks,
Andrew Turner
Deepak
December 8th, 2008
i want more information on the Sortable.
Steve
December 9th, 2008
Using Chrome? So sad. Yay Opera!
Steve
December 9th, 2008
The text should ideally be real text inside a div, not an inaccessible image. I’m sure you could easily tweak the code to make this happen.
Ryan
December 9th, 2008
Keep em going past day 15! These videos are great.
Ryan
December 9th, 2008
Hey Jeffrey,
Can you do a similar video on a ‘tool tip’ effect when you over over something. I would like to do something like this to my portfolio (http://www.furtzdesigns.com/portfolio.html) on the jflow selectors.
For example, when you hover over ‘1′ and small description fades in and slides up, like the name of the portfolio item. I tried it myself but it failed.
I would really appreciate it if you could teach me how to do this, and I’m sure someone else out there will find it useful ;P
chris simpson
December 9th, 2008
@Jeffery - you’ve made me a jQuery addict. These tutorials should come with a health warning, i’m allready shaking in need of my next fix. And the thought of the tutorials stopping at Day 15…
Thanks again for providing this great resource to the community!
Mike
December 9th, 2008
Thanks for a great series.
@Ryan - Hope Jeffrery dosn’t mind me linking to someone else’s tutorials but I think this is what you are looking for Webdesignerwall(number 5).
Alen Sirovica
December 9th, 2008
Great Jeffrey! Thanks for explaining
I’ve learned a lot
Keep it up!!
chris simpson
December 9th, 2008
it’s not to hard tweak this to use an accessible div of styled text, instead of a flat image, just like kyan’s.
What would be awesome is you could use jquery to extract the alt=”" text attribute to use as the text. does anyone know if this is possible??
Jeffrey
December 9th, 2008
@Chris -
Yeah - that would be simple.
var text = $(’#someImage’).attr(’alt’);
This will store the value of the alt attribute in the “text” variable.
chrissimpson
December 9th, 2008
@Jeffery - Perfect. Thanks so much! :]
Jeff Adams
December 9th, 2008
You are my new hero. These jQuery examples are so good - even for non-javascript people like me they make more sense!
I particularly like that these are an intro, whereas your NETTUTS ones are for development projects because they show the whys and wheres - awesome!
Jeffrey
December 9th, 2008
@Jeff - Thanks! Yeah, these videos are specifically for non-javascript people. That’s why I go over each step so many times.
I’d like to follow a similar format for other things as well. Maybe PHP? CSS?
Seich
December 9th, 2008
Awesome! They just keep getting better, i can’t wait for the next one :3 …
Timo
December 9th, 2008
Holy jQuery Batman!!!
Jeffrey,
I just came across these jQuery tutorials and just gobbled them up all in one day!
I have wanted to get into jQuery but havn’t had any motivation. These tutorials did the trick, so easy to follow and understand.
Rock on bro!
BTW I subscribed to the RSS feed.
Thanks again!
Jeffrey
December 9th, 2008
@Timo - Fantastic. Glad to hear it.
Well keep checking back. I typically post a new one every other day. Thanks again!
shaun
December 10th, 2008
@Jeffrey I’d just like to reiterate what some of the some of the others have said and say thanks for doing these! If you were going to move into other areas i’d like to stick a vote in for “PHP for Beginners”
Gareth
December 10th, 2008
@Steve, @chris - on http://kyanmedia.com the “behind image” *is* actually text, not a separate image.
Robin
December 10th, 2008
Hi, I wrote the original code for this effect and I thought I’d put together a quick blog post about exactly how I did it: http://blog.kyanmedia.com/archives/2008/12/10/easy_image_rollovers/ . It’s nice to hear that people like it
chrissimpson
December 10th, 2008
Jeffery - You should get this series added to the tutorials list on jquery.com, it would be a great resource for years to come, and also help drive the well deserved traffic to this site..
nice one
i-mad
December 10th, 2008
Thank you so much for these video tutorials series i love them
i was wondering if you show us how we can use jquery ajax with php
Jeffrey
December 10th, 2008
@chrissimpson - Good point! I did that recently for NETTUTS, but forgot about this series. I just did it.
Thanks for the suggestion!
Jeffrey
December 10th, 2008
@i-mad - Yep! That’s coming next week.
Will Robertson
December 10th, 2008
jQuery has changed my life because of you.
Lyoshi
December 11th, 2008
Hi Jeffrey,
Thanks a lot for this jQuery tutorials! They are really great and easy to follow. The best I’ve found on the web.
I would like to see some examples of using cookies with jQuery. Can you recommend us some essential jQuery plugins?
pero
December 11th, 2008
Usefull tutorials, thx!!!
Ian Roke
December 11th, 2008
I like this effect and your video tutorial explains it very well.
It would be great if you could create a short video on how to effectively create a three columned page layout with draggable/sortable DIVs across the columns with a slide effect.
Not many sites showing all these effects together and I think it would be really useful.
Apart from that great effort thanks!
Ian.
Andrew
December 11th, 2008
Hi Jeffery
Another great tutorial, thanks very much for doing these.
Is there any way you can revert to the old player? The new one has no controls for pause etc. and download speed is very poor.
Thanks again!
Andrew
Matthew
December 11th, 2008
Hey Jeffery,
Great Tutorial! Thanks for all of your hard work.
I was wondering if you could do a tutorial on the effect that is on this ThemeForest template. http://www.kriesi.at/demos/sleekbusiness/ THis is a pretty cool effect to replace flash banners.
Matt G
Johnny
December 13th, 2008
You are so awesome. This is by far one of the most helpful tuts on the web, and I appreciate you taking the time to provide such insight on a regular basis.
Kai Chan Vong
December 14th, 2008
Really enjoying your screencasts… I do however worry that some new jS developers wont think about this from a progressive enhancement pov.
I work for mainstream and so we often have to think of users without Javascript…
If I were to do it, I would have lots of the CSS being injected from the Javascript pov (eg the images being pos:absol) so that if the user doesn’t have jS - they’ll see both images and be none the wiser.
@kaichanvong
Sean
December 14th, 2008
Thanks. Great series.
Gustavo Scanferla
December 15th, 2008
Someone clicked in the WORM at the Kyanmedia site footer? LOL!
yamaniac
December 16th, 2008
youre da man! buddy!!!! Loved it!!!
norm
December 17th, 2008
What happened to the debugging tutorial? (great series so far!)
Sean
December 17th, 2008
Don’t quit at 15! This series is excellent. If you do another series, I vote for php.
Brice
December 17th, 2008
Very nice tut!
However i couldn t put a link on the hidden image and can t figure out how this would be done, can you help me?
When i put the back image inside the function stops working
Brice
December 18th, 2008
Well I found out that if i put the link outside the wrap division it works but this won t be a valid code i guess…anyway it works this way, if someone got a better way…
Bejiita
December 21st, 2008
Dood !! What happened to the feeds ? the last episode that came up in iTunes was Day 6 now nothing comes up at all . Any Ideas ?
jeff
December 31st, 2008
Thanks for the tutorials - one quick question - while doing this one (day
I get an error from my firebug that says
‘Expected end of value for property but found ‘lem’. Error in parsing value for property ‘padding’. Declaration dropped.’
I verified everything and it all looks good. If I remove padding: 0 lem; from the wrap css, the error goes away. The only thing different between your example and my code is that my images are a different size.
Any thoughts on this? My CSS skills aren’t great but I’m working on those simultaneously as I work on my jquery.
THANKS!
Merch
January 1st, 2009
Many, many, many thanks. A whole new world is beginning to open up in my mind.
Robin
January 4th, 2009
@jeff: That should be 1em, not lem.
Jt
January 5th, 2009
What about hyperlinks? Great tutorial on replicating… I like this code better than the original… but for me it’s unprofitable without being able to make the images linkable… and valid.
Gregg
January 8th, 2009
@Brice & Jt
I was having the same issue with a link, then i went to the source - Kyan Website. They have a little blog about the code they used. Basically I just changed the children declaration to find, similar to how Kyan does it and it allowed me to do what I want with the links.
See if it works for you as well.
And my hat’s off to the themeforest blog for this series. it finally gave me the push to learn more about jquery.
Mrn
January 13th, 2009
Hi Jeffrey,
first of all; Great stuff, many thanks
but the day 7 movie doesnt work for me
and youre saying that your explaining the “stop” in that one..
thanks!
RichieMc
January 13th, 2009
I suspect the answer to my question is in the day 7 tutorial, but that one is not working for me.
I noticed the function for hovering off the image is tacked on after the hover function. Why doesn’t the image immediately slide back up after it slides down? Why does it wait until you hover off?
Thanks for the tutorials, they are extremely helpful!
Mathias
January 13th, 2009
To much time with CSS and not enough jquery, if you don’t no CSS you shouldn’t be watching these tutorials.
Brian
January 19th, 2009
Video series is great. If ou do anything else, I vote fo php!
Neil
January 20th, 2009
I’d like to add my thanks for this series of videos. I’m just starting with jQuery and this is a great introduction.
I’m having a problem with this one though, and was wondering if anyone else was having the same issue and if Jeffrey or anyone has a solution.
The problem is IE. Both versions 6 and 7 aren’t displaying the ‘bottom’ image, so when the top image slides down there is nothing underneath. FF is fine.
Any ideas?
Thanks
Neil
Neil
January 20th, 2009
Please ignore my last post, except for the thanks for the videos of course!
The IE issue was with my sloppy code. I had missed a closing tag (>) on the wrap divs. FF had no problem with it, but IE didn’t like it.
It’s amazing how long you can stare at a piece of simple code and not see the seemingly glaring obvious mistake!
Batsirai
January 30th, 2009
How would you make these rollovers clickable…
perhaps?
It works in firefox not in IE…
FrankieB
February 1st, 2009
I can’t wait until they’re all done! Since I’m still learning, I use a lot of cheat sheets. I always have my iPhone with me, so I keep them there for handy reference - even offline. The best jQuery cheat sheet I’ve found so far is from these guys:
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8
They also have great cheat sheets for CSS and PHP. Hope this is helpful.
John Downey
February 2nd, 2009
Hey Jeffrey, great series! I can’t get anything past 7 to play today though (the ones hosted with Viddyou). When you get a chance you may want to look into that
daoud Dajani
February 3rd, 2009
why is it not working any more
please fix it.
thank you
Mustafa Q
February 3rd, 2009
Hey Jeffrey,
Not able to view any classes after #7. As John pointed out the ones hosted with Viddyou don’t work.
Thanks you for the screencasts and hope you fix it soon
@-JD-
February 3rd, 2009
HeY Man, fix it plz. I can’t to learn more =(
Jeffrey
February 3rd, 2009
Hi everyone. The problem is that we had to switch services. I’d swear that I downloaded all of the necessary files, but I can’t seem to find Day 8 or 9. I may have to record these again.
If anyone has downloaded a copy, please email me at sitemanager@themeforest.net.
clint carlson
February 5th, 2009
glad i checked the comments before i complained! I love these tuts so much. FINALLY i’m getting a grip on jquery and i owe it all to you. Hope these get up soon! But it’s hard to complain when everything has been so great!
Josh
February 5th, 2009
Glad to see the videos are back up. Can’t wait to get home and watch them. They are blocked where I work :/
Dave
February 7th, 2009
Fantastic tutorials. Without them I would still be struggling. But sorry, I still can’t see number 8 and 9…………….
Harsha M V
February 7th, 2009
Jeff .. we are still waiting for the videos…i am still not able to play them…
zaman
February 8th, 2009
hi jeff
i am waiting for the videos…i am still not able to play them
Justin
February 8th, 2009
Nevermind! I just read your post about loosing 8 and 9.
LONG NG
February 10th, 2009
Jeff. You rock the house. I have one question that not related. In one of your other videos, you mentioned why “background-color:#cc0000″ does not work in the “#container” tag. I can’t find the answer. Can you elaborate?
Parlian
February 12th, 2009
The jQuery tutorials day 8 and 9 do not load, at least not on my machine. Nothing happens when clicking on the play button in the middle of the screen, but when I click on the one, which should show on the skin, an new tab opens in the browser with address http://www.viddyou.com/. This is only with the videos day8 and 9, the later days work alright again.. Apparently nobody else encountered that problem.
Parlian
February 12th, 2009
Apologies, just saw that others had the same problem, but apparently still not solved
Dan
February 13th, 2009
Hey Jeffrey great tuts! But #8 is the one i REEEEEEEEEALLY wanna see and i’m getting the Viddyou thing others have mentioned. Any word on this?
Your tuts are preventing me going and playing in the snow in snowy old Enland, because they’re so good!
Dan
February 13th, 2009
England*
Scott
February 16th, 2009
The video won’t load for me either. Dang.
Nate
February 17th, 2009
Doesn’t work for me either. The timeline is 0:00 and won’t play.
Dmitry
February 18th, 2009
I’d love to get this video working. Days 1 ~ 7 have been tremendous.
Ray
February 19th, 2009
Hey Jeffery, great job with these tutorials! How about a beyond the basics when the beginner series is done? I’d love to get more in depth with jQuery and these videos are a great method of teaching. Thanks again!
Melvin Ram, BrainBank
February 19th, 2009
Thanks for putting this series together!
Here’s a slightly different approach to this same problem:
* Combine the two images (top and bottom) into one image (but they are stacked on top of each other.)
* Set that image to be the background of wrap div
* On hover, animate the background-image position to be -300px
Why would you consider this approach?
* It’ll have a slightly different effect visually since both images will look like they are moving.
* You could have the wrap div contain the text that is in the images and hide the text using Javascript. This would give you the advantage of SEO without compromising visual effect.
* Slightly cleaner HTML
Melvin Ram
Volcanic Marketing (creators of BrainBank)
David
February 24th, 2009
Semantics!!!?? If you actually look at the source code on the Kyan site you will see that the text is infact HTML not an image. The image of James Bond is an tag. This markup is semantic but also allows the js to work well.
Why did you choose to ignore this fact>
pat
March 6th, 2009
hi!
i noticed, that you incuded the wron source in the package
greets,
pat
Chris
March 18th, 2009
great tutorials. Really helping me update my website to look more professional.
Do you have an address that i can contact you on? I have some questions about hovering on a small image to get a larger image to fade in.
Any help would be appreciated.
Thx
Tom
March 19th, 2009
I’ve never smiled so much in one day. I just worked through 1-7 and will probably finish the whole 15 today. Thank you…these tutorials rock!
Afsar
March 25th, 2009
Absolutely these tuts are the best learning method of JQuery
Is there any way to download these?
jpablobr
March 31st, 2009
Hi, the download source code is for other tutorial.. can you please upload the one for this sample…
Thanks!!
this videos are awesome!!!
Saber
April 5th, 2009
Thanks Jeff a lot
I made a bit of code inspired by you!
But in the version instead of the back image you can have text in it. Here’s the code:
Inspired By Jeff!
$(function(){
$(”li”).hover(function(){$(this).children(”img”).stop().animate({”paddingTop”:”142px”,”opacity”:.5},”fast”);},function(){$(this).children(”img”).stop().animate({”paddingTop”:”0″, “opacity”:1});});
});
ul li{list-style:none; float:left; height:142px; width:145px; overflow:hidden; position:relative; padding:0 5px}
ul li img{position:absolute; top:0; left:0}
This is a Text 1
This is a Text 2
This is a Text 3
This is a Text 4
Again i would like to thank you for these awesome tutorials
aj
April 7th, 2009
Hi
I am trying to subscribe but dont know why its not subscribing me.
I am really enjoying ur tutorials and they give me confidence to work with JQuery.
Its really very nice.
I am an absolute beginner and would like to know how can we do what they have on the site http://www.kpnvandaag.nl/#home/.
I know till 8th day tutorial we learnt to slide, fade, toggle and to add an element and remove element and all but was wondering how do I do all these together.
It would be very nice if you can give some tips on that too.
All the best
Michael
April 11th, 2009
The programming techniques that was implemented on the kyanmedia site is a alot semantic. The site I reffred to is the one that is talked about on this video.
the following are the html, css and jquery.
jquery
$(’#body_home #our_work li’).hover(function(){
$(this).find(’img’).animate({top:’139px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({top:’0px’},{queue:false,duration:500});
});
it affect only the front image.
css
#our_work li{
list-style:none;
float:left;
background: #fff url(/images/bg_with_caption.png) no-repeat 0 0;
margin:0 30px 95px 0;
padding: 5px 7px 8px 5px;
width:258px;
position: relative;
}
#our_work li img {
position: absolute;
top: 0;
left: 0;
height: 139px;
width: 258px;
border: 0;
}
html
Our latest work
A new voice for illustrators
Kyan give leading provider of online benefits a facelift
A new online identity for a Brand Consultancy
There is on one image per list in the html code. The second image which is a background is introduced in the css code.
The point of this comment is that people should do their homework. You need to have a good understanding of the web dev langauge before you start learning about css or javascript frameworks. This is not meant to discredit the tutorial. I did my research to understand the concept behind the illustration.
I do appreciate this tutorial however.
Mickey Hoang
April 12th, 2009
thanks a lot
Codie
May 9th, 2009
Loving the videos
Jonathan Wells
May 13th, 2009
This is absolutely amazing! This stuff is better than “Lynda.com”! On one of your sites: http://vector.tutsplus.com/ there is a drop-down menu beside the search bar. Is it possible to get a tutorial on how to do that? A client of mine wants a slide down sitemap of the entire site based on this site’s top panel: http://lancasterbaptist.org/
charlie
May 15th, 2009
HECK YEAH!
Thanks for the days of learning!
L.A.
May 21st, 2009
Loved this tutorial. Helped me understand an issue I was having where I wanted to slideUp and slideDown an element inside a div. I couldn’t get it to animate the children inside the div and I could not get it to just animate the one i clicked. I made another awkward workaround to get it to work, but using what was taught here I could make my code a bit leaner and more universal, or I guess “object oriented”
P R
May 27th, 2009
Jeffrey, you are man of talent. Would you make video PHP for beginners? I am foretaste it. Privet from Russia!
sssss869
June 8th, 2009
Hi i’ve seen a text box n searching option in this site, http://www.stylemob.com/index.php?category=users#app=page%3D1%26category%3Dusers%26doAjax%3D1%26rand%3D999061185
How can I di that?
miguel
June 29th, 2009
not sure if this is still been updated but the video for Day 8 is not loading. Anywhere I can get it?
By the way, awesome job!
Thanks for the tutorials.
Rob
June 30th, 2009
Thanks for your great series! Here’s my version of Day 8’s hover effect using a CSS sprite (combined graphic image [as Melvin suggested]) - combined with the ‘animate’ method you shared on Day 7:
http://zornfett.com/client/themeforest/
CSS sprites, as you all know, are handy for speedy loading of page content. Cheers!