CSS in Blogger - Part Two
This is the my second attempt at creating an image gallery within a Blogger Blog using Cascading Style Sheets (CSS). The code that I have used will allow for a larger image to appear when the cursor is passed over them.
In my previous post, I created a similar CSS image gallery effect that I found at Dynamic Drive. All went according to plan if you were using Internet Explorer. But for those using other Internet browsers, the larger image was cut off at my sidebar.
In my endeavour to learn more about CSS and CSS image galleries, I was lucky enough to come across a new acquaintance who goes by the name of, "Narrowband".
I am attempting to partly replicate his example which is based on Dynamic Drive's CSS and his invaluable assistance has enabled me to put this one up on the blogosphere.
NOTE: Within my template I have placed Cascading Style Sheets (CSS) into two sidebar widgets. The codes are similar but each CSS was given a unique gallerycontainer and thumbnail reference name.
Settings within each CSS were customized in order for the larger images to appear above and below the thumbnails that you see here. Enjoy the images!
If you encounter any problems please let me know what they are, including the details of your Internet browser. This has taken a long time to do and even though I'm knackered, I loved doing it.
Thank you again, Dynamic Drive and Narrowband and as we say Downunder, "Your blood's worth bottling."
To be continued...
28 comments - make a comment? Click here:
Great job Peter, now I want to know how to do it. I love that it doesn't take up so much space and the text isn't lost among the photos.
My fingers thank you too, not as much scrolling.
Looks the same in Google reader, I see both images large and small.
How marvelous, Peter. You are mastering your new hobby. I can't wait to see what you post next. :D
Great post and images!!!
Hugs, JJ
Hi Janeywan and thank you. If you follow the links to Dynamic Drive and Narrowband, you will be on the right path. If you get stuck, just let me know and I'll help out where I can.
From what I know, this effect will not work in Google reader or feeds, as the CSS required to run it, is solely contained in my blog widgets.
Take Care,
Peter
Hi JJ! Being an Aussie, I'd have to say its "bloody marvelous". Sorry about the B word.
I've put way too much time into this and think it's time for a change. Time to start visiting my friends.
Your friend,
Peter
Great job! Loved the photos. Old photos of St. Vincent's I presume?
I am intimidated by CSS. I have manipulated code in them but I was lucky and had no idea what I was doing!
Hi Windyridge and thank you. The images are of St Vincents. The old wards that you see, had changed very little by the time I got to them in 1975.
I found CSS daunting as well. But after playing around in WLR and my test blog with the help of the links in this post, I was finally able to get the two CSS posts out.
All the best and take care,
Peter
hi there! I was looking for an answer to my aligning problem when I came upon your site.You gave me a great idea, I am a newbie and still learning,thanks a lot,hopefully I can do this too.
Hi Mayet and welcome! When I first started off blogging, I looked to Peter Chen's Blogger Tips and Tricks for help. Peter is a great teacher and has helped me out on numerous occasions, as he has with many others.
A link to his site is found at the bottom of my sidebar. Good luck with the links and all the best!
Take Care,
Peter
The cascading style sheets are wonderful! I've never seen anything like it. It's fun. I want to do it! Congratulations, Peter!
hi I was up till 2am. trying to have the same result of photos you have.but I am still lost.Can you help me a little well that is if you have time
Hi Jennifer and thank you. This CSS post pales in comparison to your "This" on MW. Now, if I could write as well as you do, that would be something!
Take Care,
Peter
Hi Mayet! I know what your going through and please do not loose any sleep over it.
Now, I would be very glad to help where I can. To start off with, could you let me know what you have done so far.
You might find it easier to email me with those details, if not just put the information up here.
email:
pjjmccartney(at)hotmail(dot)com
Take Care,
Peter
Superb! I haven't tried this yet. You've given me some inspiration to move on it!
Have a great day!
Works and looks super, I have Firefox 3. The images are great as well, cool effect.
Hey Peter!
Great job, mate!
The pictures look fantastic, and everything is working properly! I also have firefox and I will try it out on that one too!
"Your" hospital is beautiful! Loved it :D!
Who is the couple before the delicious cakes? Is you and your wife? What was the occasion?
Congratulations on this final result, Pete!
Cheers
Peter:
Success! I'm using Firefox with Mac OS X software and it worked perfectly. The thumbnails were perfectly placed in the text, and the larger images immediately popped up right in the center. No problem.
Happy trails.
Hey Peter now I have to call you, you are genius. This is brilliant, I may have to use it one day, lol. Great job! So what else are you going to impressed me with, lol? Anna :)
Hi The Muse and thank you! My inspiration comes from my family and friends, my friend!
Take Care,
Peter
Hi Bob and thank you. I think I might be too long in the tooth, to be trying out new browsers. Plus this old computer, in the words of Scotty, "Can't take anymore!".
Take Care,
Peter
Hi Max and a big thank you, to you too! "Who is the couple before the delicious cakes?" That my friend, is my classmate and the picture was taken at our nurses graduation party in 1978!
Now, wouldn't it be fantastic if I could meet up with them again. Just another reason for this blog of mine. Well, I can live in hope, can't I!
Take Care,
Peter
Hi Swubird! Success at last! Oh! what a feeling! It has all been worth it! Thank you for helping me out on this one.
Take Care,
Peter
Hey Pete!
You are most welcome :D!
Aah, your classmate, cool! You graduated a year before you got married :)!
Yes, it would be great if you could meet them again! And your blog serves this purpose indeed!
My mom met one of her classmates through a blog two years ago...so I think it is totally feasable! :D
Cheers
Hi Anna! No, I'm not a genius, but with the help of the links in the post, it makes me look like one! As for what's next, I think I will keep it simple. Just like me!
Take Care,
Peter
Hi Max. It's about 6am here and I imagine you're just about to go to bed. Lucky you!
Thank you for your message from the MW forum. Mike and JD have gone to a lot of effort in order to spread the good oil about writing.
I have a long way to go, before matching their skills and yours.
But I can take heart from the words, "Rome wasn't built in a day."
I may have left it a little late, but I do live in hope of meeting up with past classmates from St. Vincents.
Take care,
Peter
Hi Peter!
No, when I sent that message I was about to have dinner lol!
You are welcome, my dear friend :D! Mike and JD are awesome, they made me laugh like crazy yesterday at their home party LOL *nodding*!
It is a cool project and it has all the ingredients to succeed!
Nonsense, you write just as well as we do :D!
I wish you and your wife a merry weekend, my friend :D!
Cheers
Hey peter , first time i am seeing a blogger who take so much pain in responding to each and every comment on his blog. Great stuff.
used tanning.beds
Hi there!!
I was able to do it though there are still some more refining to do but I am really happy that I was able to post my image gallery. My post in my sample blog is better than the one posted in my main blog.
Have a lovely day.
Myra
Hi Mayet! Well Done! It looks fantastic! Time to catch up on some sleep!
Take Care,
Peter
Post a Comment