Sliding Boxes and Captions with jQuery
The Basic Idea
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
Confused? Cue the helpful diagram -
From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.
Step 1 – CSS Foundation Work
Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following will make it functional - review my complete stylesheet in the downloadable file.
The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. This is important to make the overlap while sliding work. Dont’ forget that overflow:hidden makes this all possible.
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2.
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to.
Now we’ll need to set up the default starting point for the caption box. If you want it fully hidden initially, you will want the distance from the top or left to match the height or width of the window (.boxgrid), depending on which direction it will be sliding. You can also have it partially visible initially, as .caption .boxcaption illustrates.
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}Step 2 – Adding the Sliding Animations
This next stage is a matter of choosing which animation suites you, I have included a bunch of pre-formatted potentials to help you along. Play around with them to find one that fits your needs and style.
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});Step 3 – The HTML
There are a few classes that we created simply as selectors for JQuery. Keep these rules in mind:
- The div class “.cover” should be assigned to whatever is doing the sliding/movement.
- Within the div .boxgrid, the img should always come first.
Here’s an example of the HTML I would use for the .captionfull animation:
<div class="boxgrid captionfull"> <img src="jareck.jpg"/> <div class="cover boxcaption"> <h3>Jarek Kubicki</h3> <p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p> </div> </div>
Go Forth and Create
I’ve only touched upon a few options you have, these boxes are your canvases, create away. I would encourage you to download the attached files, as it may be easiest to just copy-paste the parts relevant to your project.
Be sure to post any questions, thoughts, or cool things you’ve done in the comments below!
Discussion
April 1st, 2009 at 2:09 AM
There’s a similar effect on http://www.sidd.ca/showcase.php . Nicely done, better coding.
Bogdan Pop’s last blog post..Design for grandma too!
April 1st, 2009 at 2:42 AM
nice stuff! love the effect on the demo page
cheers!
Callum Chapman’s last blog post..Batch Image Resizing in Photoshop
April 1st, 2009 at 4:54 AM
I noticed that if I change the tag to:
That the page loads with the hover state activated. How do I get rid of this? Any idea why its doing this?
April 1st, 2009 at 4:56 AM
Sorry…my post didn’t come through. If I add the DOCTYPE to the opening HTML tag, the page loads w/ the hover state activated. I’m using FF 3.0.8 on Mac OSX 10.4.11.
April 1st, 2009 at 5:48 AM
This helps us to forget about Flash for to add interactivity for little elements.
Thank you.
Idemium’s last blog post..Actualités
April 1st, 2009 at 7:21 AM
Great tut! Looks similar to what I do over at http://www.TutorialMagazine.com
April 1st, 2009 at 9:24 AM
Nice implementation of the slide effect.
ozzysong’s last blog post..Slides creativos con jQuery
April 1st, 2009 at 9:29 AM
Bogdan Pop – thanks for the mention! Had to come check out the new referring site that popped up in our stats. Not bad.
April 1st, 2009 at 10:15 AM
Perfect! I would love to see this hover effect integrated with a simple image gallery. I can’t find this anywhere…
Thanks for sharing!
Vivianne’s last blog post..vimello: Me falaram que fulano morreu e eu comecei a rir, primeiro de abril e tal… Mas morreu mesmo. :X
April 1st, 2009 at 10:18 AM
So… how would one turn this into a fading slideshow while still preserving the nifty hover/caption effect?
April 1st, 2009 at 10:37 AM
Very nice effects, and well executed. Thanks!
April 1st, 2009 at 10:51 AM
@Amy Stoddard
I had the same problem : Win XP, FF2, IE6, Chrome… etc.
I think the problem comes from the css and the positionnig of the boxcaption and it’s interpretation:
You just need to add the unit after the positioning:
.captionfull .boxcaption { top: 260px;…
.caption .boxcaption {top: 220px;…
for 0, you dont need unit a 0 is absolute 0%=0px=0whatever… so will be understood.
I guess with a doctype unit needs specified for non-zero values as otherwise is intrepreted wrongly (or not at all) since too many to choose from: 260% !=260px!=260em != 260whatever
This solved the problem for me. (tested: html4.01 + xhtml11 strict)
April 1st, 2009 at 3:19 PM
I get the whole thing, except how and where do you call this jquery to achieve the animation?
Chris Raymond’s last blog post..Golden anniversary scrapbook
April 1st, 2009 at 6:38 PM
@Jorgen
You run a quality site, it played a part in the idea for this tutorial, thanks for that!
@julian
This is not quite meant to be a slideshow, however if you are interested theres a great tutorial here : http://jonraasch.com/blog/a-simple-jquery-slideshow
@rohnn
Nicely done, thanks for saving me some explanations
@Chris Raymond
You’ll want to put the jQuery in the header, if you look at the downloadable files you’ll hopefully get a good sense of where to put what.
April 1st, 2009 at 11:02 PM
thanks for the great work!But I have a question:Can I get a inner border when mouseover the image.just looks like this site(but it use flash)http://www.ciriljazbec.com/
April 2nd, 2009 at 6:44 AM
Very awsome tutorial, thx a lot for it. I will for sure use this in some of my projects
Bajzito’s last blog post..Slávna Helvetica
April 3rd, 2009 at 12:53 PM
Great tutorial. Added to http://tutlist.com
JDStraughan’s last blog post..Create a Ajax based Form Submission with jQuery
April 4th, 2009 at 7:56 AM
I love your script and it will be very useful for a website i’m cooking by now.
I use it with “slidedown” to show a text hidden by the image. It works, but if I give an absolute positioning to my text (by styling h4 and h5…) , they appear in front of the image.
Is there a way to solve this problem ?
Best Regards,
Max
April 4th, 2009 at 11:54 PM
I had done something like this and put a post here http://www.jquerymagic.com/2009/03/how-to-make-a-beautiful-portfolio-gallery-using-jquery-animate/
It’s using no plugin as well. Just a day before this one
Mahbub’s last blog post..Guitar Chord Finder : Yet another old day script
April 6th, 2009 at 5:44 AM
Well, I found a (simple) way to do the trick : adding z-index to the image to get it to stay over the content even with positioning enabled.
Once more, thanks for this wonderful script !
April 7th, 2009 at 4:19 PM
Nice work!, Love It!
April 8th, 2009 at 11:26 AM
Regarding Rohnn’s explanation on how to fix the page loading with the captions in an up state.
I don’t understand how to fix the issue sorry?
Can anyone elaborate? (layman’s terms lol).
Cheers, Cookie.
April 9th, 2009 at 4:15 AM
@Cookie – the answer of your question is simply just add “px” “em” or “%” on
.captionfull .boxcaption {
top: 260;<—-px,em or % here
left: 0;
}
.caption .boxcaption {
top: 220px;<—-px,em or % here
left: 0;
}
works for me.(tested: html4.01 + xhtml11 strict)
Thanks
April 9th, 2009 at 9:13 AM
Great job. Thanks for that!!
April 9th, 2009 at 5:27 PM
Cheers Jive.
I worked it out lastnight but didnt have chance to reply
April 9th, 2009 at 5:30 PM
Don’t suppose anyone knows how this’ll work with with jQuery lightbox v0.5? I’m trying to get it working on the thumbnails with it……..
April 9th, 2009 at 7:00 PM
Cool, i can confirm that it works with jQuery lightbox v0.5 on: WinXP FF3.0.8 & IE 7.0.5.
Thanks a million Sam.
April 10th, 2009 at 1:29 AM
So does this code not work with any doctypes? I am trying all of them and the sliders just won’t position correctly. The demo page does not have any doctype associated to it so can anyone out there get this to work on a web standard site?
April 10th, 2009 at 1:25 PM
Awesome tutorial! This is exactly what I’m looking for for my site, but I’d prefer to use MooTools to achieve it. Unfortunately, I don’t know how to properly port this… Anyone know where I can find a similar tutorial for achieving this effect with MooTools or perhaps could explain how to port this?
Thanks!
Tyler
April 10th, 2009 at 7:56 PM
This is great but I’m worried about it slowing down my page loads. Is that going to be a problem?
April 12th, 2009 at 10:04 PM
Very cool
April 13th, 2009 at 9:10 AM
Looks great, Sam. But I don’t like that a hidden part is visible while a cover is loading. It’s impossible to create a secret area under the cover because of this nuance.
thorn’s last blog post..COMINDWORK/BLOG: Project Management Certifications [godzhesas edited]
April 13th, 2009 at 4:42 PM
Im using it now! Thanks for the easy tutorial on this!
BeyondRandom’s last blog post..Poker Hand Values
April 13th, 2009 at 5:39 PM
Another live example can be viewed at Tutorial Magazine: http://www.tutorialmagazine.com/
I bet the tutorial is added there as well
koew’s last blog post..I Want Vin Diesel in Every Movie I See
April 13th, 2009 at 6:24 PM
@koew
You’re absolutely right. Tutorial Magazine played a large role in motivating that particular variation of the effect. Jørgen should be congratulated on running such a fantastic site. If you’ll notice, he was actually one of the first to comment on this very tutorial.
April 13th, 2009 at 9:53 PM
Really nice examples, simple but effective and yet another effect that I will be using as time goes by.
Thanks!
April 14th, 2009 at 12:17 AM
A question, where did you find that art, looks pretty good)
Oliver Leitner’s last blog post..The new OpenSuSE Studio in Action
April 14th, 2009 at 11:21 AM
very cool script.
I wish it had manual controllers (e.g. close X) instead of auto close on mouseout
K.
April 14th, 2009 at 2:52 PM
Hi all, Is their anyway to make it so that the captions text is not transparent, only the caption box? I noticed that with my white images, the text’s transparency is quite visible!?
April 17th, 2009 at 11:44 AM
@Zach Dunn Thanks for the kind words, coming from you that does actually mean a lot
You guys run a good ship here at buildinternet too!
I was thinking of making a tutorial about the slide effect, but you got ahead of me, so from now in I’ll make no improvements to my site in fear of you guys making great tutorials about them!
Keep up the good work,
Jørgen
http://www.TutorialMagazine.com
Jørgen’s last blog post..The first two months – and why I love Twitter
April 19th, 2009 at 1:42 AM
DOCTYPE – I had the same issue once I added the DOCTYPE. Adding px to the css fixed the issue.
.captionfull .boxcaption {
top: 260px;
left: 0;
}
.caption .boxcaption {
top: 220px;
left: 0;
}
Graffhead’s last blog post..123 Klan + MSK in Hollywood
April 20th, 2009 at 6:08 PM
Any advance on my last query?
//
Hi all, Is their anyway to make it so that the captions text is not transparent, only the caption box? I noticed that with my white images, the text’s transparency is quite visible!?
//
April 20th, 2009 at 8:40 PM
@Cookie
I noticed that was the case when I was first putting this together. I tried playing around with resetting the opacity levels individually on the text, but it didn’t seem to work. I too would be curious if anyone has a work around.
April 21st, 2009 at 9:19 AM
@Cookie, @Sam Dunn: I have the same problem, but what you can do is to keep the text at 100% opacity, and then use a transparent .png image with a 90ish % black fill as a background in the sliding box. Of course you’ll have to use some sort of png opacity fix for IE users, but it works.
Jørgen’s last blog post..33 Best Photoshop Tutorials of April 2009
April 21st, 2009 at 2:53 PM
Superb !! the best part is it also works in my cms
thank u 
April 21st, 2009 at 9:37 PM
How could I make this work with external classes?
April 22nd, 2009 at 3:31 AM
Awesome sliding boxes…
I will use it for sure…
thanks..
April 22nd, 2009 at 5:29 PM
I had a problem
when the site star the grid is in the bootom of the image, if I hover the grid show like should be…
sorry for my english, Im from Argentina.
nifer’s last blog post..cocinero pervertido
April 26th, 2009 at 8:37 PM
Hi, the first thing I want to say is that I absolutely love this jquery effect and it gave me ideas on how to enhance my portfolio.
The only problem I am facing is with flash objects. I embedded 3 flash elements in my website (twitter, lastFM and DailyMugshot). LastFM is covered with a slide the way it is supposed to be. Twitter and DailyMugshot unfortunately aren’t (at least not in FF3 windows and IE). The slides are positioned underneath the flashobject or in IE next to the object (which makes it invisible due to the hidden overflow)
Anyone have a solution?
Thanks in advance
April 28th, 2009 at 11:16 AM
This is off topic but i’m sure someone can help.
I am trying to reproduce a similar text roll-over effect with jquery, as can be seen on the nav here: http://www.designshowliverpool.com
Does anyone know where i might find the answer?
Many thanks.
C.
April 28th, 2009 at 5:10 PM
:O esta buenisimo
gracias chato encima es gratis 
nice i love you xD
May 1st, 2009 at 5:30 PM
Has anyone had issue with the sliding boxes getting to work in Safari? I cannot get them to work in it on or offline. Has someone run into this problem? Anyone got a fix is there is a problem. (Using Safari 2.0.4).
Thanks in advance.
May 1st, 2009 at 5:39 PM
And yes, javascript is enabled just in case you were going to ask.
May 3rd, 2009 at 12:04 AM
How can i get this to load into a div from thumbnails?
May 3rd, 2009 at 5:40 PM
@Lars.
I have no problem running it on safari v3.1 on win XP.
Would you happen to have an URL where we could check out your page & code ?
May 5th, 2009 at 3:55 PM
It is possible to do with this examples something like this ? http://mixcss.com/
I have no idea
May 5th, 2009 at 7:28 PM
@ciddey
nice effect that matie.
Anybody any wiser on how to produce this nav roll-over here then?: http://www.designshowliverpool.com
May 10th, 2009 at 9:38 PM
I just tried this out and was up and running in about 10 minutes. Thanks for the great tutorial.
May 13th, 2009 at 5:04 PM
Problem :
Table cannot be include in “.cover” element, CSS doesn’t works. Moreover “span class” is not fully recognized.
See example :
http://www.lacavedepheeric.com/index2.php
The table I wish include is : http://www.lacavedepheeric.com/EssaiFeuilleVin.html
May 14th, 2009 at 2:53 AM
Great! thank you
May 23rd, 2009 at 12:01 PM
This is wonderful tutorial! Love the sliding cover effect, is what i was looking at!
May 25th, 2009 at 10:05 AM
I love this script… But I suck at this kind of coding (my mind won’t grasp it).
What I want is…
this script and
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
+ a blender lol
May 26th, 2009 at 1:56 AM
For the life of me I cannot get this to work in IE OR Safari. Works great in Firefox. Please help! I’ve followed the tutorial and downloaded the files, but am obviously missing something!
June 1st, 2009 at 12:49 AM
I love the simplicity of it and I like the functionality. Great job on the tutorial.
wpdigger’s last blog post..Theme Membership Sites – Are those really useful
June 8th, 2009 at 6:50 AM
Great tut, really simple and beautiful…
I have an issue though, maybe it is a stupid thing but I am getting stuck…
It works well on my side when having one single page: on my main page I have a menu that “ajax” call the page containing my boxes… all links to js, css are on my index… and nothing happens…
when i put my boxes onto my index, it works… looks like there a sort of dependency, but cannot find where… and kind of newbie with jquery…
June 13th, 2009 at 4:47 PM
Thanks a lot! Very helpful.
June 15th, 2009 at 2:08 AM
Is there a reason why the alignment of my wordpress page is thrown off when I use this code? Please help.
June 19th, 2009 at 5:59 AM
great job and nice work and good plugin.
June 20th, 2009 at 8:52 AM
Great work, i can add to jquerys.ru?
June 26th, 2009 at 9:11 AM
@cookie how did you get it to work with lightbox. I’ve been trying but getting no where.
@sam wow, great job!
June 29th, 2009 at 12:03 AM
hi how are you, just wanted to let you know that I love your tutorials.
I have a quick question for you or anybody that can help me. I was trying out your:
Sliding Boxes and Captions
but its not working when i implemented in a new page, the caption box starts off in the middle then when you hover over it it goes to the bottom and then it hides, its going nuts i tell you… and i really did try, please advise me,,, what am I doing wrong.
Thank you for your time guys
June 29th, 2009 at 1:05 AM
hey everyone sorry about the last help request, I was able to fix it… Ahhh love it I’ll share with you as soon as i’m done.
July 6th, 2009 at 3:12 PM
Hello.
I know this is the dumbest questions ever for the power brains, but .. huh … Where do I add my own photos?
It is a 719px width and 480 height.
This is sliding boxing is awesome and I’m gonna try hard to get it working.
Thank you.
July 7th, 2009 at 6:19 AM
I am trying to position multiple slide boxes side my side but i can’t seem to repeat the function properly. I have created one successfully but i now want to use this same function a few times on the one page. Can anyone help?
July 7th, 2009 at 12:15 PM
woooowww! son lo maximo! esto esta genial lo estuve buscando por todos lados! un saludo chicos! son geniales! Gracias!
July 8th, 2009 at 4:59 PM
Awesome plugin! I can’t wait to implement it.
.-= ithemesdotnet´s last blog ..Eventina WordPress Theme =-.
July 10th, 2009 at 9:39 AM
I don’t know why this is happening, but for some reason the boxes just all of a sudden stopped working. Visually they look correct, but they aren’t sliding when the mouse rolls over it.
Is this happening to anyone else?
July 23rd, 2009 at 6:47 PM
I have this working correctly on a dev site in Firefox (Mac & PC), ie6,7&8 (PC). I have 3 boxes aligned and all is great … except … in Safari 3&4 (Mac) only one of the areas displays – the last of the 3 covers up the first two. I cannot figure out why. Any ideas?
July 23rd, 2009 at 6:57 PM
@divpix
I neglected to include DOCTYPE in the download/demo, I have heard a lot of people have fixed their problems by adding it in.
July 25th, 2009 at 9:01 PM
I am trying to implement this into a cubecart site for my company and everything shows properly except the captions don’t slide. I do have a bunch of other scripts that i have created and implemented that use jquery could these be causing any problems?
July 25th, 2009 at 11:01 PM
@Arthur Ebbinger
I would reference my previous comment and if that doesn’t work then I would try removing the other scripts for a test to see if they are impacting sliding boxes
July 26th, 2009 at 9:06 AM
Fantastic tutorial Sam. I’ve implemented it on my blog home page with a minimum of fuss.
July 27th, 2009 at 8:33 PM
Having a bit of trouble with the script. Upon page load, the caption panel is shown when it should be hidden, when you put your mouse over it, it then slides down and acts as it should. I made sure all of the height values had “px” but that didn’t fix it.
Please help. Maybe you can see something I’m overlooking. Thanks in advance! Here’s the work in progress site:
http://www.thethrillmill.com/wip/
July 28th, 2009 at 1:16 AM
Nevermind, got it. I didn’t see the “top” property in .boxcaption because it was buried after fixes for IE.
August 3rd, 2009 at 9:23 AM
Love it!!
But I do have one problem, im wanting the box area to be a clickable link, not just a text link, how do I do that? Ive tried a few things but no luck, very much like http://www.tutorialmagazine.com, any advice would be great!
Cheers
August 3rd, 2009 at 6:05 PM
Does anyone have a work-around fix for Active X blocking this?
August 4th, 2009 at 6:45 AM
Someone asked how to do this same effect in mootools (I think Jquery is easier to understand!). After much headscratching, I came up with the following code, which seems to work (I’ve only done the “peak” but you’ll see how to do all the others):
window.addEvent(“domready”, function(){
$(document.body).getElements(“.boxgrid.peek”).each(function(el) {
var fx = new Fx.Morph(el.getElement(“.cover”),{ duration:200, link:’cancel’ });
el.addEvents({
“mouseenter”: function(){ fx.start({ ‘top’: 50 }); },
“mouseleave”: function(){ fx.start({ ‘top’: 0 }); }
});
});
});
.-= Madeglobal´s last blog ..Wordpress Better Protected Password Pages =-.
August 9th, 2009 at 6:00 PM
Hey, that’s a wonderful application. But it doesn’t work in my case. What I’ve done wrong? I’ve placed the code in step 3 in a html-document (in the body-tag), but when I look at it in a browser (firefox 3.0.13) it has problems with the css and the link http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” href=”http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” rel=”nofollow”>http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” target=”_BLANK”>More Work . Can you help me? That would be very nice! Thanks a lot. greets colorjuice
August 9th, 2009 at 10:04 PM
@colorjuice
Typically if you include the DOCTYPE as I have mentioned above it irons out most problems if you followed the tutorial correctly. Good luck!
August 11th, 2009 at 11:08 PM
what about accessibility, and graceful degradation? how does this fair in those respects?
August 12th, 2009 at 7:57 AM
Wow, these are really cool. I’m gonna implement these into our portfolio site very soon!
August 15th, 2009 at 11:51 AM
Great Script – Many applications for use – Thanks for sharing
.
@rohnn – Thanks for picking up on the css – missed that and was also obsessing that doctype was to blame – spent far too much time before reading your fix!!
August 18th, 2009 at 11:51 AM
Great effect, but it doesn’t seem to be working right in the newest build of webkit.
.-= Vin Thomas´s last blog ..8 Questions With Creator of Rethink Monthly, Bo Lane =-.
August 18th, 2009 at 11:54 AM
It worked on refresh. Hmm…must not have loaded the script right the first time. Sorry…
.-= Vin Thomas´s last blog ..8 Questions With Creator of Rethink Monthly, Bo Lane =-.
August 18th, 2009 at 12:44 PM
Hi, I love this script and it worked great until I put it on the page it needs to be on with other scripts as well. I have javascripts pagination and lightbox scripts on the same page. I tested it and the cause of the sliding boxes not to work is definitely the other scripts on the page.
Does anyone know how to fix this?
August 19th, 2009 at 6:32 PM
This is pretty cool! I’ll have a play with this todayasfasfasf.
August 20th, 2009 at 10:48 AM
Another great article. Peaple who give this information a re a win for the web. Keep on going.
August 20th, 2009 at 10:49 AM
Thanks. I agree that is good.
August 23rd, 2009 at 12:00 AM
Hmm… now, suppose you the original image with a css sprite of the original + final image that actives on hover, to get a completely degradable solution. That sounds ballin’.
.-= Sean´s last blog ..Apache start problem =-.
August 24th, 2009 at 5:25 AM
A better sliding box/caption than the early that i found & use. This is very easy (page loading also), great for site and blogs.. thnku
August 24th, 2009 at 2:38 PM
Brilliant mates !!! Thanks for sharing…
.-= Jµ´s last blog ..Hello world! =-.
August 24th, 2009 at 8:39 PM
this is probably one of the best jQuery techniques EVER!
.-= joão ramos´s last blog ..tom waits revisited =-.
August 27th, 2009 at 5:00 AM
Amazing. I like it. Will surely use it.
.-= Bryan´s last blog ..10 Tips for natural SEO =-.
August 28th, 2009 at 3:44 PM
Really interesting and useful!
Thanks a lot, it’s a fantastic job =)
August 28th, 2009 at 10:21 PM
Awesome! thanks!
Quick question though, is there anyway to make the slider go up 100% and completely cover the background image?
Thanks a lot for the help.
August 30th, 2009 at 8:10 AM
Hi guys. I like ur scripts. It’s nice and wonderfull. I must show ur web at my group. Good work. Thanks
August 31st, 2009 at 3:11 PM
This is great, I would love a tutorial on how to implement this with Wordpress – Like how to get the post title into the text area OR get an image from a post into the box.
Great tutorial
September 1st, 2009 at 5:59 PM
Hi everybody,
This job is very good and i’m modifying it for a little website.
I found a BIG problem in the demo. If user want to use key tab (for focusing), a layout’s bug occurs. the cover element is always up and if mouseover event occur, the effect is x2. I may be wrong but I think that it is not in the code (because it is only for the 1st and second that a problem is detected)
For information, The problem is the same on other website like : http://www.tutorialmagazine.com/
If anyone has an idea to debug…
September 3rd, 2009 at 3:45 AM
Is there a solution for users with Javascript disabled, perhaps making the whole image clickable, this would mean that read more text wouldn’t be displayed (since the whole image will be the read more), but it would mean that if JS is disabled, the user can still get to the page it is promoting.
September 3rd, 2009 at 12:07 PM
Nice article.
Look at the second column of my site homepage. There is a slider.My Site HomePage
September 5th, 2009 at 1:57 AM
You are the man!!!
September 8th, 2009 at 12:19 PM
This is a truly wonderful script
September 10th, 2009 at 10:42 AM
thanks guys
September 14th, 2009 at 12:58 PM
This is very nice – any idea how I can create a scroller with 5 or 6 images?
Similar to this:
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
September 15th, 2009 at 10:05 AM
I had to come back and thank you for this. This was exactly what I was looking for and it fit right into a project I was working on.
Great work and greatly appreciated
.-= PSD to HTML´s last blog ..Wordpress plugins folder – OSNN Forum =-.
September 17th, 2009 at 11:06 AM
Thank you for your help Lee Wilson
September 24th, 2009 at 12:16 AM
Exactly what I was looking for !!!
Thanks
September 24th, 2009 at 3:27 PM
Nice work!… can I translete in Italian language and Post on my New Drupal Blog? of course i add the trackback on this.
.-= kiuz´s last blog ..Eliminare Account, Windows Live Vs Facebook =-.
September 26th, 2009 at 1:35 AM
Awesome script..this is what i was looking for, thank you very much
September 27th, 2009 at 4:43 PM
Nice work on this script!
I’ve integrated it into the Wordpress native gallery (working on a plugin), but I’m having a weird issue with the the caption being active on page-load. Once you hover over the image, the script works fine, but I’m not sure why it auto loads as active.
Anyone else have this issue?
September 27th, 2009 at 4:50 PM
Nevermind. I noticed someone above had the problem.
In the script, the .boxcaption top values don’t have “px” in them, which throws things off. Adjust those and you’re fine.
Thanks again!
September 28th, 2009 at 12:59 PM
Is there a way to overlay the image, let use the Kamil Smala image as an example, so there is an overlay of say 30% black, then when the user hovers it is removed, i.e. it comes into focus.
Thanks
September 29th, 2009 at 4:47 AM
coooooooooool thanks
October 1st, 2009 at 2:43 PM
Thanks a lot for these, it will come in handy for sure
October 2nd, 2009 at 2:50 PM
Hi Guys,
I got one problem that i cannot seem to fix. Everything is working great in FF and Safari, but IE is giving me a hard time (big surprise)
I am using a jQuery slider to slide threw some Featured images in an unordered list. Only one image is displayed at a time until you click on the next/prev button to slide in the next image. Hovering over the image will display the box caption, everything works great.
However in IE, all the images in the unordered list are displayed when the page loads. The box caption does work, but it throws my slider out of whack. Removing the box caption script makes the slider work perfectly again.
Any suggestions on how to solve the issue?
p.s. I have added “px” to any numeric values
October 3rd, 2009 at 3:13 AM
is it just me, or does the demo for this not work at all in Safari 4.0.3 or FF 3.5.3 on os x 10.6.1??
October 3rd, 2009 at 5:13 AM
ok, so i checked this on a different machine and it works now? very strange.
October 4th, 2009 at 7:24 AM
@Sam & @Cookie
Regarding the opacity problem i.e. the text is semi-transparent as well as the box, there is a simple fix for this.
In the .boxcaption css rule, remove the opacity property and add background: rgba(0,0,0,.8); just below the existing background property. This won’t work in every browser but will solve the problem in Safari and Firefox at least.
The opacity property sets every child element to be of the same opacity, whereas rgba allows just the specified opacity for that element. Hope this helps!
.-= Adam´s last blog ..My Trip to Paris – Part 3 =-.
October 10th, 2009 at 11:21 PM
I love this! I’m only having one problem. When i test the page, in FF, and IE7/8 the cover is always at the top, and active… when i roll over it works normally, then disappears like it should. How do i get rid of the active state on page load? thanks in advance.
October 10th, 2009 at 11:38 PM
p.s Im using dreamweaver so DOCTYPE is already present at the top of the doc.
October 10th, 2009 at 11:58 PM
Example…
http://img7.imageshack.us/img7/2760/exampleissue1.png
thanks to image shack.
October 14th, 2009 at 10:15 AM
can’t get this to work with lightbox. any help?
October 14th, 2009 at 1:15 PM
to my above comment, nevermind.
i used slimbox 2 and that solved everything.
man this is gonna make my site so sick.
thanks guys!
October 14th, 2009 at 1:27 PM
how would i get the Full Caption Sliding example to work if the height is not known or non constant?
October 16th, 2009 at 3:09 AM
still nothing. I’ve tinkered with the code and nothing seems to work. it still starts at the top on load and does disappear until i hover, and roll out. if anyone knows how to fix this, I can supply example html/code
October 16th, 2009 at 3:18 AM
ok..its official… patience is a virtue. read some of the above comments and that fixed it. so lazy of me
October 16th, 2009 at 5:03 PM
Brilliant. Super easy..though unable to fix the active state issue that has come up.
I have added “px” to every place possible and added the DOCTYPE.
Here is what I am using in the css
”
.boxgrid{
width: 88px;
height: 71px;
margin-left: 488px;
margin-top: 245px;
float:left;
background: #9DCB3B;
border: solid 0px;
overflow: hidden;
position: absolute;
z-index: 1;
}
.boxgrid img{
position: absolute;
top: 0px;
left: 0px;
border: 0px;
}
”
and the demo as it is:
http://greenfootprintdesign.com/vcards/test
Man I´d really appreciate any help I could get.. Hours have dwindled away trying to figure this out.
October 19th, 2009 at 6:22 AM
Hey,
thanks so much for the tute, its very easy to follow and works great!
However, I was wondering if its possible to center the elements on the page.. ive tried padding on the left to get it in the center (as the images are in a container), but the mouseover is in effect over the padding as well.. A faux ’spacing’ div can be used, but is there any other way?
Cheers, Alex.
October 20th, 2009 at 1:13 PM
Has anybody used the “boxgrid peek” feature and been able to fix the active state issue that has come up? I read every single comment on here and added px to every possible numeric entry..
Posted my css info in a comment or so above..would appreciate if anybody can help me figure out what i´m doing wrong?
thanks thanks
October 23rd, 2009 at 10:31 AM
Thanks for the amazing trick i love it
October 27th, 2009 at 5:26 AM
Has anybody successfully implemented this for wordpress? Because i have tried and no matter what I do it messes up the alignment of my webpage?
Please help?
October 29th, 2009 at 2:46 AM
great tips And script, thankyou.
.-= chiangmai guide and tour´s last blog ..Mandarin Oriental Dhara Dhevi ChiangMai Hotel =-.
November 6th, 2009 at 12:01 AM
These are absolutely the coolest things. I used them for my portoflio page: http://www.webdesignersknoxville.com/portfolio.
November 6th, 2009 at 12:04 AM
oops…http://www.webdesignersknoxville.com/portfolio
November 8th, 2009 at 6:48 AM
thanks for this nice script.
November 8th, 2009 at 2:39 PM
awesome
that’s great post
thanks
November 9th, 2009 at 11:49 AM
I love the functionality of this, but I’m struggling to get it working in Joomla.
I get the following javascript error:
$ is not defined
[Break on this error] $(document).ready(function(){\r\n
Not sure how to fix it, so any help very much appreciated.
Just starting out with javascript so maybe this is something very straightforward.
November 9th, 2009 at 1:15 PM
found out what the problem was and it was a conflict with the mootools.js library (which is loaded by default with joomla). Disabling this fixed the problem.
November 10th, 2009 at 2:38 PM
Is there a plugin for this for Wordpress?
I don’t know how to integrate it manually within a theme.
November 10th, 2009 at 4:58 PM
verry impressive..
.-= tuna´s last blog ..Photoshop’ta Hoş Bir Girdap Yapımı =-.
November 15th, 2009 at 12:02 PM
I’m having trouble having 2 boxgrid windows of different sizes work with sliding captions in my page. The second size caption isn’t visible initially but will appear and work correctly on rollover.
What is the correct way to code various sized Container Windows in one HTML page?
thanks for everything!
November 18th, 2009 at 11:03 AM
How can I strip out the JS and include it from the HTML file?
November 18th, 2009 at 3:05 PM
Just want to start by saying that I love this effect. Thanks for creating the tutorial.
I’m having trouble getting a 2 column fixed layout to work correctly below the sliding boxes in Firefox v3.5.5. The code looks right in Safari (Mac).
Here’s a link to the demo page. http://www.emeract.com/jm-web/index2.html Any ideas on how to fix the floats/positioning/whatever to make it cross-browser compatible?
November 19th, 2009 at 9:03 AM
By process of elimination, I found out that the opacity values under .boxcaption were breaking the layout. You were right about it being a rough topic!
November 25th, 2009 at 8:47 AM
I really appreciate you sharing this!
I read through all of the comments so far and noticed that a couple of people have the same issue as I am having. I load my gallery into my main page with a separate jquery script and it seems to disable/conflict this effect. I can’t seem to figure this out for the life of me.. anyone have a fix?
thnx in advanced
http://tmwebstudios.com/internetstudio/web-design.html
December 5th, 2009 at 7:56 PM
Very cool stuff indeed!
December 6th, 2009 at 12:41 PM
Practical and useful. This blog could benefit from reply links, several others asked questions about the plugin.
December 8th, 2009 at 10:16 AM
Hi brilliant script..
I need to use more than one instance of the script on the same page.
How do i go about doing that?
thanks!
December 8th, 2009 at 9:35 PM
Nice jquery thanks for sharing
December 14th, 2009 at 10:09 AM
Nice Job. Your Job is A Big feat.and your is marvelous.with the best regards for you good luck .
December 21st, 2009 at 11:32 AM
I use flash galleries http://flash-gallery.com. Easy to install and modify. Flexible appearance settings
December 23rd, 2009 at 3:43 AM
Great job, i will be sure to use this for my next project.
December 23rd, 2009 at 3:45 AM
Impressive, i always love javascript over flash for this great reason
January 2nd, 2010 at 9:04 AM
Excellent! Bookmarked!
January 10th, 2010 at 10:18 AM
I was having trouble with the caption loading in the visible position as well.After adding the unit type after the positioning it helped but didn’t fix it completely I had to make sure my positioning in the CSS was the same as the positioning for the idle state in the Javascript. Hope this helps some people
January 13th, 2010 at 4:20 PM
For some reason when I use the Vertical Sliding boxes, I go to the page I’m using them and while the page loads and before you hover over it, it looks like this
http://i50.tinypic.com/21m6xkh.jpg
but after you hover over it and the page is fully loaded it comes to look like this.
http://i48.tinypic.com/s145mc.jpg
And thats how it’s suppose to look from the beginning but for some reason it locks up top until you hover over it and it will slide to the bottom. Anyone know what I’m doing wrong?
January 13th, 2010 at 9:38 PM
this is really nice thanks
January 14th, 2010 at 11:40 AM
not working in html5 doctype…
January 15th, 2010 at 3:48 PM
thanks for this slideshow plugin
January 15th, 2010 at 9:30 PM
Hey, great script I’m going to implement this on my website because I like the visual appeal ( http://www.puahub.com ) hopefully it will help increase my readership. thanks
January 21st, 2010 at 3:29 PM
What a cool Tutorial, good Stuff. Many Thx.
January 25th, 2010 at 2:32 PM
This may have been up here for a long time, but this is an absolute classic.
Thanks Sam and Zach,
Simon
January 28th, 2010 at 4:18 AM
Hi, great stuff here, works great.
However, I have a problem, probably because I’m a noob.
I can’t get the thing to be centered onto the page. I tried the “div container” css trick, but it does not work at all. Can anyone tell me how to center the html so the content would sit center in the browser? Thanks.
January 28th, 2010 at 11:19 PM
ah, found the answer, turns out my markups were off. Anyways, great script!
February 4th, 2010 at 10:07 AM
hanks for this slideshow plugin
February 5th, 2010 at 8:49 AM
JC – how did you wind up doing it? I had tried getting this to center on the page before, too, but never had any luck.
February 6th, 2010 at 1:24 PM
Okay, so I’ve figured out how to get the images center in a DIV… but I can’t get more than one image in a row. Rather than displaying three or four across, it just piles them on top of one another down the page. I’m not really sure where to go from here. Has anyone else run into this problem?
February 7th, 2010 at 7:26 PM
Is there a way to have the animation slide be automatic rather than, mouseover. Maybe have it slide up for 10 seconds and then down for 15, then repeat, thanks!
February 8th, 2010 at 2:01 PM
Hi, I have had an issue with it placed inside of a couple of DIVs.
When the page is loaded/refreshed, the caption starts at the top of .boxgrid instead of hidden below (like the boxcaptionfull transition)
is there something i should be aware of? Any help or advice would be great.
Cheers!
David
February 11th, 2010 at 4:13 PM
Very well!
Amazing galery, congratilations!!!
February 14th, 2010 at 9:11 PM
How would I add delay to the effect? i.e. have a 2 second delay before the text/etc. slides out?
February 21st, 2010 at 1:06 PM
Hi!
I did not go trough all discussion if there is a coment about conflict with this js and some other js like for example jquery.droppy.js menu wich Im getting when I import this js.. is that right or am I doing something wrong? thanks!
February 28th, 2010 at 4:05 PM
Hi
I too have an issue with the JS not loading properly, but I am guessing it is conflicting with another JS that is loading.
I have managed to get the script working perfectly here:
http://www.johnstrand-mk.co.uk.server64.ukservers.net/boxes/
But, once placed in the CMS it no longer works: http://www.johnstrand-mk.co.uk.server64.ukservers.net/
I would really love to get a solution for this because I would rather not use a rollover state which is time-consuming and restrictive.
Thanks in advance and, by the way, lovely script and nice looking website.
Daniel
February 28th, 2010 at 4:12 PM
Okay, after a quick look around, I have discovered that the mootools.js script that loads for my AjaxSearch in MODx is causing issues. I need this to load for the search to work properly, so do you have any ideas what I might be able to do?
March 7th, 2010 at 5:06 AM
1. .captionfull .boxcaption {
2. top: 260;
3. left: 0;
4. }
5. .caption .boxcaption {
6. top: 220;
7. left: 0;
8. }
for whom those use Doc Type, it needs to add “px”, something like top: 220px instead top: 220;
please fix that in your demo
btw, good coding, cheers
March 9th, 2010 at 2:07 PM
Question. I try to replace an image (the exact same size) and the new image won’t load. Its 325X260.
So, then I take one of the existing images and duplicate it and rename it.. example “nonsense.jpg” to “nonsense2.jpg” and the “nonsense2.jpg” won’t load…
Any clue what I am doing wrong??
George
March 9th, 2010 at 2:24 PM
Follow up… when I copy and paste the “nonsense.jpg” and rename it to “nonsense2.jpg”, it works BUT when I load “nonsense.jpg” in photoshop and then save it as “nonsense2.jpg” it won’t load when I run the index.php file.
That is soo weird to me… I use photoshop everyday for web publication.
I can’t figure it out.
George
March 9th, 2010 at 3:07 PM
Update II:
Weird.. it works in firefox but not IE…. BUT, your jpgs load in the IE!
George
March 9th, 2010 at 3:43 PM
Good tutorial.
Any ideas on how to get this to work with Json and flickr script..? So that you can load in images onto your site and then the captions can slide open to show them.
March 10th, 2010 at 1:57 AM
Thanks for this great tutorial.. I was looking for something similar to this…
Thanks
Regards
xcellence IT
March 11th, 2010 at 1:55 AM
I love this effect but want to resize it to say 196px wide, I’ve tried it with an image this size and resizing the values but no joy! any suggestions?
March 12th, 2010 at 1:36 AM
Very nice and useful tutorials for web designers,
Thanks for posting.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.