Podcast Episode 10 – CSS Photo Gallery
Easily create a CSS photo gallery with a Unordered List and some CSS
Watch us on iTunes
Discussions
RSS Feeds
Archives
Follow Me On Twitter!
Categories
Easily create a CSS photo gallery with a Unordered List and some CSS
Your podcasts are great and easy to understand, great job!
Niklas
19 Jan 09 at 10:04 am
Thank you! I love getting comments like this, I’m glad a lot of people are finding these things enjoyable
Stephen Korecky
19 Jan 09 at 10:10 am
Excellent!!
now i remember i have to finish a photogallery i left behind cause i was on vacations!!.. last thing i remember my photo gallery wasn’t working in IE6.
can u upload the source code?
Manuel Minino
20 Jan 09 at 10:49 pm
Yes, the source code is up now, sorry about that. I was without my computer for a day
Stephen Korecky
20 Jan 09 at 10:57 pm
Great podcast! I’m glad I found your site by accident.
I tried joining your forums but I needed approval.
Keep it up, looking forward to more episodes.
LifeSteala
26 Jan 09 at 9:43 pm
i really need to know how do you attach all the sheet together it was easy for the css sheet but how do i attach the js sheet
thanks for the tips
claire
2 Feb 09 at 3:45 pm
Ah, yes. All you have to do is this:
<script src="global.js" type="text/javascript" charset="utf-8"></script>And you’re set!Stephen Korecky
2 Feb 09 at 3:52 pm
It’s great but doesn’t work for my IE7
Do you know what is wrong?
IEhater
24 Feb 09 at 2:03 pm
What isn’t working in IE7? The only thing that wouldn’t work is opacity, but other than that, should work fine…
Stephen Korecky
24 Feb 09 at 2:10 pm
I noticed that I must add ” ” to index.html because IE didnt read global.css. But now I have a problem with ActiveX in IE7. Everytime when I want to open index.html i must click and give a permission to run ActiveX. Otherwise lightbox doesnt work and it looks like that: http://img261.imageshack.us/my.php?image=82335610.jpg
Do you know what to do with it?
PS. sorry for my english.
IEhater
25 Feb 09 at 8:09 am
There should be * I noticed that I must add ” link rel=”stylesheet” href=”_stylesheets/global.css” type=”text/css” media=”screen” charset=”utf-8 ” to index.html…
IEhater
25 Feb 09 at 8:11 am
Sorry bothering you but I know how to add opacity for IE.
It should look like this:
#gallery li a img {
border:2px solid #333;
padding:.1em;
opacity: 0.8;
filter: alpha(opacity=80);
}
#gallery li a img:hover {
border-color:#CCC;
opacity: 1;
filter: alpha(opacity=100);
}
We just need to add ilter: alpha(opacity=X);
IEhater
25 Feb 09 at 8:20 am
@IEhater (nice name!)
Thanks for sharing that, I just meant the way I was using opacity, but your right, that works for IE
So you got it figured out then?
Stephen Korecky
25 Feb 09 at 2:59 pm
really cool ive been struggling to get a grip with photos this should really help…
kenichi
13 Mar 09 at 7:04 am
Hi! Great tutorial! Thank you very much!
Alice
13 Mar 09 at 10:24 am
Hi. I´m a rookie in this of creating web sites and i need some help with the code that IEhater wrote. Where should i put it so the css gallery works in IE7. Should i wrote it between ¨¨ or ?
Nice post Stephen. Thanks for your help
Mermado
16 Mar 09 at 12:07 pm
Hi. Nice post stephen. I have a few questions. I´m a rookie in this of work with css and i have a doubt about the solution that IEhater gave. where should i copy this code: ” link rel=”stylesheet” href=”_stylesheets/global.css” type=”text/css” media=”screen” charset=”utf-8 ” in the head or body? Should i put it inside ¨¨ or ?
Thanks for your help.
Mermado
17 Mar 09 at 10:38 am
<link rel="stylesheet" href="_stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">This is the full line of code that you need in the index.html in the
<head>section of your markup, it will not load the stylesheet if you put that in the body. Make sense?Stephen Korecky
17 Mar 09 at 10:49 am
thanks stephen. That solve my problem. Thanks again.
Mermado
17 Mar 09 at 10:58 am
Stephen,
Great tutorial! We were able to reproduce your results and our team did get good results with IE. Many do not realize a good css photo gallery is a great foundation to a good web design gallery. Reading nice articles like this can only improve the quality of the skill sets of your programmers. Keep the articles coming!!
CSS Gallery
19 Mar 09 at 3:52 pm
Hi,
I have been trying to embed your videos on my css resource website, but it doesn’t work and show a permission error.
Is there anything else i am required to do apart from using the embed link?
cheers
dave
dave
6 Apr 09 at 9:54 am
@dave, in the past I have had problems with people embedding my videos and allowing users to download the flash video, this created a problem for tracking podcast views and download. However if you do not allow users to download the source file, I can add you to the list of accepted sites. email me at skorecky (at) gmail (dot) com if you need to get back to me. Thanks!
Stephen Korecky
6 Apr 09 at 10:11 am
Hi Stephen,
I want to know your email adress for attaching images, because I have a problem with your Photo album in CSS.
Problem is, that the code does not work in IE7. When I click on the image, the image appears only of the end of the page, not at the center, as it should. It really turns me off.
P.S. Please help or answer, works with IE7 or not? I want to know what I`m doing wrong maybe.
Bug link: http://rapidshare.com/files/226725094/1.PNG.html
Dainius
28 Apr 09 at 8:25 am
Hi Stephen,
I have been watching your podcast’s since you started and I must say, I am very impressed! Very easy to understand and great effects.
I hope you don’t mind that I have used a few on my site: http://www.westscotlandsailing.com
Keep up the good work – I can’t wait for the next episode!
Kind Regards,
Andy
Andy
4 May 09 at 7:54 am
Wow nice tut, added bonus of the source code as well. Most tuts leave you with a great psd file and no code. Thanks for that!
photo retouching
15 May 09 at 10:51 pm
Very very nice! Thanks for the source code. The podcast definitely made it easier to understand.
Jason
22 May 09 at 12:03 pm
Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.
Marco
27 May 09 at 12:09 pm
Hi Stephen,
Thanks for all the videos, they are very helpful!!!
Question about Episode10: I really like the thumbnail properties, I want to use the css in a different photo gallery that uses swapImage, and not a light box. How can I add an ‘active’ link property in css? ( #gallery li a img:active {} is not working)…
#gallery li a img:hover {
border-color: #549EFF;
opacity:1;
text-decoration:none;
}
hranush
2 Jun 09 at 10:35 am
@hranush
In theory that should work just fine as long as :active comes after :hover in your css. However keep in mind that active is only happening while you click, soon as you let go it turns back to it’s normal state. So as long as active has a noticeable style change i.e border:2px solid CC0000; you should see it work. Let me know if you’re still having trouble with it and I can take a look at your markup
Stephen Korecky
2 Jun 09 at 10:52 am
Stephen,
oh I see now, is there a property for ‘onclick’ maybe, I think that’s what I’m looking for, that has the same ‘hover’ property ..?
here is the link:www.lusinesargsyan.com/lusine if you want to take a look
Thanks
hranush
2 Jun 09 at 1:29 pm
@hranush there isn’t, however you could do something in JS to fix that. If you’re using jQuery, it would look something like this:
$("ul li a img").click(function(){
$(this).addClass("selected")
$(this).parents("li").siblings('li').find("img").removeClass("selected")
});
It may be a little different depending on your needs, but I hope this gets you started.
Stephen Korecky
2 Jun 09 at 1:42 pm
Hi Stephen,
CODE to select btns:
Thanks for the help. I just want to follow up on this subject. I’m using Dreamweaver and I couldn’t make that code work, it’s from my end I know because I don’t know enough java.
But I got a new one that works great!
/**/
Test 1
Test 2
Test 3
hranush
3 Jun 09 at 12:50 pm
oops my bad HERE is the right one (I don’t know how to post just the code
but if you right click and View Source the code there)
/**/
.selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
Test 1
Test 2
Test 3
hranush
3 Jun 09 at 1:01 pm
somehow the code is not showing, that’s why it’s also not working. Here is the actual code.
CODE to select a btn:
in the write the javascript code
<!–
var Lst;
function CngClass(obj){
if (Lst) Lst.className=”;
obj.className=’selected’;
Lst=obj;}
–>
in the write the css
<!–
.selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
–>
Inside all the btn links add this code
Test 1
and that’s it
hranush
3 Jun 09 at 1:19 pm
just wrap your code with a
<code>some code</code>tagStephen Korecky
3 Jun 09 at 1:20 pm
so Inside all the btn links add this code <!– Test 1 –>
and that’s it
-sorry for all these extra posts
hranush
3 Jun 09 at 1:22 pm
No problem, glad you got it working!
Stephen Korecky
3 Jun 09 at 1:57 pm
Stephen,
Love the tutorial and code. Question…for IE6, on certain wider images, the imageDataContainer is not expanding with the width of the image and the next button is hanging over the image. Case in point:
http://img6.imageshack.us/img6/7622/72681079.jpg
Any idea as to why this is happening? I have other images the same width and height, and it doesn’t do it on them.
Thanks.
Scott
23 Jul 09 at 12:25 pm
Thank you! This was a great tutorial! Thanks for the source code.
The code works perfectly in FF and Chrome.
However, in IE7, I do get a warning “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer”.
If I ignore the warning and click on one of the thumnails, I see this: http://img261.imageshack.us/img261/7105/82335610.jpg
If I allow the clocked content, then it works as exptected.
Is there a way to avoid getting that warning in IE7?
Thanks again!!
Devika
26 Aug 09 at 10:19 am
Stephen,
I know I’m late to the party, but thank you SO much for this awesome tutorial. It was so helpful for this non-designer (who dabbles in web stuff periodically).
I’ve bookmarked you and will be checking back to go through your other tutorials when the work load lessens!
Thanks again!
Leslie
31 Aug 09 at 6:50 pm