Comments on: Thumbnails Navigation Gallery with jQuery

By: Anton

Anton — Sat, 28 Jan 2012 11:55:15 +0000

@DiAlex

Thanks, it did work for me – I’ve added #meta http-equiv=”X-UA-Compatible” content=”IE=8″# in my header just below the title and it worked – obviously just replace the # with opening and closing tags – the IE=9 thing didnt really work

By: Marie Pelletier

Marie Pelletier — Fri, 27 Jan 2012 15:50:04 +0000

It’s just a great aplication
Thank you

By: DenisD

DenisD — Sat, 21 Jan 2012 23:19:29 +0000

ok…watch my test site, i think is kind of what you want…if you look at the source code you’ll see for each pict you have to set a padding-left, rising from the complete left and add 183 or 186px (not sure iv modify mine). Its a bit exhaustive but it work…at this time i work on formule jquery to count the position by itself but for now this is it.
http://www.ma117.info/thumbtest/index.html

By: zim

zim — Sat, 21 Jan 2012 20:07:15 +0000

Thnks DenisD!
I’ve tried and yes I can see the title under the mouse, but if I want to have the title to be write like here: http://dl.dropbox.com/u/22933018/SITO/index1.html

If you watch under “portfolio”, when you move on the pictures you can see the name on it, but it doesn’t move and always appeared on the first photo. I can’t understand why.

My CSS is:
.st_thumbs{
height:166px;
margin: 0;
position: absolute;
}
.st_thumbs > a{
display: block;
}
.st_thumbs > a > span{
display: block;
position: absolute;
margin-left:auto;
color:#fff;
font-size: 28px;
bottom: -40px;
left: 18px;
text-shadow: 5px 1px 1px rgba(0,0,0,0.4);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.st_thumbs a:hover > span{
display: block;
position: absolute;
border: 0;
float:left;
text-align: left;
left: 20px;
bottom: 108px;
}
.st_thumbs img{
border: 0;
float:left;
margin:3px 3px 0px 0px;
cursor:pointer;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.85;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}

By: DenisD

DenisD — Sat, 21 Jan 2012 15:35:16 +0000

sorry the blog wont accept the code so inside each img braket you have to write title=”blablabla” then it ill display on mouve over of the img

By: DenisD

DenisD — Sat, 21 Jan 2012 15:32:19 +0000

@zim you have to add the atribut ( title ) inside each

By: zim

zim — Sat, 21 Jan 2012 14:34:20 +0000

Hi!
I really like this tutorial!

I’m trying to figure out how to visualize the descriprion of the photo on the photo itself when I’m over with the mouse (like in this gallery: http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/)

My problem is that I’m now able to display the title but it come out everytme only on the first photos even if I’m on the other ones with my mouse.

How can I do?

Thnks a lot for your time!

By: justrj

justrj — Fri, 20 Jan 2012 21:04:32 +0000

sorry wrong link:
http://sirlawrencedavis.com/index.html

I attempted to adapt this so that the entire tab can be used to select the tabs and for some reason the thumbnails flash, or blink whenever they are “hidden”. I have changed the function 50 times over and for the life of me I can’t get that to stop happening. I find that it doesn’t do it if I just make the arrow the only selectable part. Any ideas?

By: justrj

justrj — Fri, 20 Jan 2012 20:46:33 +0000

http://www.sirlawrencedavis.com/sld_test/index.html

By: DiAlex

DiAlex — Tue, 17 Jan 2012 15:18:13 +0000

looks like this website doesn’t show the line…. -_-

go to this link: http://stackoverflow.com/questions/4811801/force-ie9-to-emulate-ie8-possible