Mobile Friendly Website

CSSPLAY

Doing it with style

lightbox mark 3 COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

jasperguy:-
Just check out your new script gallery mk3, and wanted to let you know what issues Iwas having on IE6. Firefox 1.5 is great, no errors.

Here is the url of the screen shot.

i20.photobucket.com/albums/b218/jasperguy/cssplay-gallery.jpg
(01.04.2006, 23:08)

Stu:-
jasperguy, is this a copy of my page in your browser, or a copy that you have transferred to your PC to play around with.
There should be no issue with IE6 as I have tested this. also IE5.5 is ok.
(01.04.2006, 23:44)

miguelvideosub:-
Very nice galery Stu. If you don´t mind , and with your permision, I will try one of this galerys last maked from you...Thank you.
(02.04.2006, 19:33)

Ramesh:-
I am generating the above file dynamically using XML, XSL. The number of photos may grow with various sizes. Then the view is getting skewed. Is there any template for thumbnail display with various sizes?

Your help is appreciated.
(03.04.2006, 20:57)

Denis:-
When I visit your page for CROSS BROWSER MULTI-PAGE PHOTO GALLERY MK.3
1st April 2006, using Firefox 1.5.0.1, under Windows XP Pro, the enlarged image (after clicking the pop-up) stays enlrged only while the mouse cursor is on the image. Moving the cursor off the image causes the display to return to the original lightbox3.html, which dispys your instructions. Is this what you intended?
(04.04.2006, 08:44)

Stu:-
I am using FF 1.5.0.1 at the moment on Windows XP Pro and the enlarged image stays whilst the mouse is within or on the overall brown border. Moving outside this border left/right/bottom will return you to the instructions. Moving to another (light brown) tab will display the thumbnails for that tab. This is my intention.
(04.04.2006, 10:53)

Scott:-
I saved the gallery mk3, and when I viewed it in Firefox, I got a full row on the top, and a full column on the left, but missing a 9x9 block below that. Can you tell me how to fix this?
(06.04.2006, 15:36)

Scott:-
I'm sorry for speaking so soon. I fixed that part. But I'm wanting to make it a 5x5 block instead of a 4x4 block. I don't understand CSS enough to be able to sift through it to find the spot. Every change I make seems to do nothing. How would I do this?
(09.04.2006, 04:50)

neo@neora.com:-
great gallery. is there any way to include titles for each image? this is important not only for visitors watching the image, but for google finding it too.
i'd be so grateful, and willing to contribute to this website of course, if there's any way to implement it with titles.
(12.04.2006, 19:48)

Roo:-
Hello there, I love your CSS..

Slight problem though, exactly the same thing is happening for me as was happening to Jasper..

Although it's fine in Firefox, it's a bit of a mess in IE and I can't seem to remedy it.

(www.mistercrumbs.com/ie.jpg / www.mistercrumbs.com/ff.jpg)
(21.04.2006, 22:38)

Stu:-
Roo,

This is usually to do with a non compliant doctype. Also check your stylesheet with the latest version (there was a small error of .menu22 instead of .menu2)
(21.04.2006, 22:52)

Roo:-
Awww, thanks so much for replying so soon Stu..

I've checked and I'm ok for .menu22's..

I've read a fair bit about validation and although it does shift things around slightly I'm still getting two of each 'button'..

And it's shifted to the top of the browser.

Any idea which validation I should be using? (it won't allow me to post the one I'm using in here).

Sorry for all the questions, thanks again.

If I can get this working I'll certainly donate!
(21.04.2006, 23:44)

Stu:-
Roo, can you email me the url of your page. I may be able to spot the problem. It will have to be tomorrow though as it's midnight here and I'm off to bed after a 14 hour working day.
(22.04.2006, 00:00)

Roo:-
Oooh, and I just copied the validation tags from this page (should have thought of that before, sleepy) but to no avail.

Ah-ha, it works in IE7 (gosh it's ugly) beta 2!!

Although the CSS layer I'm using is still shifted towards the top of the browser window, which isn't your concern I suppose :)

And I've just fixed that, still no joy in IE6 though.
(22.04.2006, 00:06)

Roo:-
Will do, off to bed myself, weary boy.

Erm.. Sleep tight.
(22.04.2006, 00:07)

Anonym:-
great work on you css code.
I have been trying to do something similar but I have been unable to get my medium sized images to hover over the smaller ones. Even when I copy your code they a still under half the smaller pictures
(26.04.2006, 00:19)

Wolfgang:-
Congratulations to photo gallery Mk 3.
I've edited this gallery in such a way that an additional descriptive text is displayed immediately right of the big image. I think this enhancement makes it more useable.
I want to use it for my private art-gallery and therefore i ask for your permission to do so. If you can give the permission I will donate, a back-link to your site is already present. Please have a peek and visit my (at this stage unofficial and hidden) gallery at "members.holba.at/wolfgang/bilder_n/aktuell.html"
Recent art-homepage is at "members.holba.at/wolfgang/bilder/".
I'm a evening artist and hope to attract the eyes of future visitors with this gallery.
best regards
Wolfgang Holba
ps: There are 2 small mistakes in your files:
1)In lightbox3.css you define "font-family:verdana, arail, sans-serif;" which should be " verdana, ARIAL, sans-serif;". 2)At bottom of the HTML-file you noted "<div class="clear">&nbsp;</div>" , but there is no declaration in any of the css-files...
pps: If you could give me a hint, how i'm able to center the small images in ie I would be deeply grateful.
(30.04.2006, 15:20)

Stu:-
Wolfgang, you have my permission.
The centering of the small images in ie is all down to the values of width and padding in the
.menu ul li:hover ul li style.
decrease the width and increase the padding.
It may require a hack to serve this up to ie as it may affect other browsers and also the large popup image.
(30.04.2006, 17:12)

randsco.com:-
Thanks! The CSS in your gallery helped me to overcome a problem I was having with z-index for hovered elements in IE.

www.randsco.com/index.php/2005/09/11/changing_z_index_on_hover

Ultimately, it inspired a more robust, 3rd version of my "Photo-caption Zoom" (PZ3).

www.randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3

Cheers,

stk
(10.05.2006, 21:10)

Stu:-
randsco.com it took me a little while to figure out the answer to this problem and I am glad that it helped you with your photo-caption-zoom project.
(10.05.2006, 22:05)

Scissor:-
I'm going to use this type of gallery for my personal web site. Your works are excellent!
Your work will be credited, of course!
(15.05.2006, 12:02)

Cal:-
This gallery is great! A nice addition would be a link/arrow at the bottom of the big picture frame to the next big picture so you could scan all big pictures without going back to the small images. How/where could that be done?
(23.05.2006, 16:18)

Giovanni:-
Stu, this is an elegant gallery solution. Nice job! Oddly, it doesn't appear to work completely with Netscape 7. After clicking on the 2x photo, I have to click outside the thumbnail area to see the full size photo. Also, the gallery appears at the left side of the page rather than centered (or at least offset) as it appears when using IE.
(23.05.2006, 16:56)

bedgrass:-
It's simple, looks good and works.
Can i colaborate with something?
(24.05.2006, 15:59)

Cal:-
A BETTER idea ... Replace the "Click to close large image" with three icons: Left Arrow, Up Arrow, Right Arrow. Up Arrow would do the current close large image, Right Arrow would advance to next large image, Left Arrow would return to previous large image. I am not sure how to do that though? Comments?
(24.05.2006, 17:20)

Stu:-
Cal, you are now into a scripting language. I'm afraid that css is not up to this type of navigation.
(24.05.2006, 17:43)

Cal:-
Bummer! Thanks for the reply. I was hoping to avoid scripting. Since I just dabble with CSS I don't completely understand how clicking on the 2x photo allows you to see the full size photo.
(25.05.2006, 14:40)

Cal:-
I've created a new click.gif containing a left and right arrow. Would it be possible to create an image map for the click.gif containing two hotspots (the arrows)and still have a functional "Click to close large image"? I've read your image map tutorial and am not sure how to integrate an image map into mk3.Your help on this would be greatly appreciated.
(28.05.2006, 20:22)

dazzle:-
Hi,Has anyone been able to figure out the reason for the "double button" display in IE, I get the same results as jasper and roo, I've been playing with it all day to try and make it work because it works so, so well in Firefox.

Any top tips greatly appreciated...
(08.06.2006, 19:29)

Stu:-
The only reason I an see for a double button is that you have not included the .hide class or the .hide style and you are seeing both the IE button and the non-IE one.
(08.06.2006, 19:44)

dazzle:-
Thanks for the reply stu,
Both sets of buttons is exactly what I am seeing, if i remove the IE conditional comments and the code inside them then I get one set of buttons...

however, in neither case do the buttons do anything in IE....very odd....

I'll keep playing when I've got more time, see what I'm doing wrong..

Thanks

Daz
(13.06.2006, 17:26)

Giovanni:-
Does converting to xhtml 1.0 Strict require any chnages to the css or its implementation?
(23.06.2006, 16:16)

Stu:-
Giovanni, I have converted from xhtml1.1 to xhtml 1.0 Strict and the only difference is the !doctype.
(23.06.2006, 16:52)

pmak:-
I was going to use your code for my personal website and I was wondering where in the code is the part where 'click to close the image' is located and perhaps how it is done?
(25.07.2006, 19:41)

Stu:-
pmak, this is in the stylesheet:
background:#eee url(../lbox/click.gif) top center no-repeat;
The text is an image which is loaded into the top middle of the display area.
You will need to fully understand the styling before you try to adapt it to you web site.
(25.07.2006, 20:32)

Jay:-
Can this code be made to work with Netscape 7.1?
I have tried most things, works great with IE and Firefox but positioning messed up in netscape!
Cool code though. Please let me know if this can be fixed. If it can I would like to use the code on a site and am happy to donate.
Thanks
(03.08.2006, 01:26)

Jeejay:-
I LOVE THIS GALLERY by far the best i've seen

I was trying to tweak it a bit to fit my purpose i just cant figure out how to add text under the larger image and make it fit in the grayish area if any of you could figure it out it would help a ton
(21.08.2006, 00:51)

Pratik:-
One of the the best templates I have ever seen. Thanx a lot!
(02.09.2006, 06:24)

Pam:-
Oh boy!
everythinglooked great, then I moved a few picture orders and Now the pics are all over the table
(14.11.2006, 05:24)

Pam:-
phew, it was just the pos#'s needed fixin'!
(14.11.2006, 05:34)

Pam:-
I love this gallery, photo gallery Mk.3 But, is there a way that the end size can be a variable depending on the size of original photo? Not all photos are 640x480. With this size, some pictures have to be redone and centered on a bg of 640x480
(13.01.2007, 00:00)

Stu:-
Pam, just give the non 640x480 photos a separate style and add the required border style to make them 640x480
(13.01.2007, 00:33)

Mc:-
While this is cool. It assumes same picture size that's not the case in real life. Any demo with dual sizes landscape and portrait ?
(26.02.2007, 21:04)

Stu:-
Mc, you don't need to look far. The 'next' demo and a couple of others further down the list cater for both portrait and landscape.
(26.02.2007, 22:04)

TTron:-
Hi, i like your CSS Gallerys and tried some of them.

I want to use the Multi-page photo gallery MK.3, but only want to have one Category and want to show the thumbs always. I dont want to see the background Image an the text in it and dont want to use a link to the category.
I tried to modify the code, but it seems that i am not able to undestand how it works. ;(

Sorry about my bad english.

Greetings
TTron
(25.10.2007, 22:41)

Joel:-
Hey,
I was viewing this demonstration in Firefox 2, and I was able to close the full picture by clicking anywhere on the picture. Is this ok?
Also, the "x" in the corner appears in the thumbnail menu also.
(23.11.2007, 15:18)

Stu:-
Joel, this is a feature of Firefox, and the 'X' is there whenever a page is displayed.
(23.11.2007, 16:18)

Wysiwyg1977:-
1.5 years after the last comment >_< I've currently undergoing a site revamp, and pushing for a pure CSS layout. This is the perfect gallery template for me to get my feet wet, however I have the issue that though displaying perfectly in FF, IE7 is just a blank gray screen.

Major Work In Progress link:
www.houseofkarp.com/v2/gallery.html

I'm not a beginner but by no means am I advanced on this yet, any input would be greatly appreciated. Thanks for all you do, credit will be given on the site when completed.
(17.12.2007, 03:17)

Wysiwyg1977:-
lol what a typo...I meant '1 year after the first comment' Just a notion of how your work is standing the test of time.
(17.12.2007, 03:19)

Wysiwyg1977:-
WOOT! Figured it out...nevermind :P
(17.12.2007, 04:11)

Robert Brazys:-
Very nice work. I love me some CSS mastery!!
(18.12.2007, 21:04)

Gonzalo:-
Hi stu, first of all congrats for this grate gallery.
I´m trying to adapt the gallery to my web page and i have one question. How can i make to show the rollOver image of the first line of pictures in a different place than all the others. I need to do that because when i see the rollover image of the first line it covers the gallery menu.
I supose that i have to apply another class just to the first line, but i can´t make it right.
Any help will be appreciated
(16.04.2008, 14:39)

Susan Sailow:-
Stu Nicholls:
What a beautiful use of CSS!!....
Like a previous comment, I am interested in having one category (like, Landscapes), and have the thumbnails display right away.
I took out the dd section and have fooled around a lot, but cannot get it to work.
Any ideas?
:Susan Sailow
(13.06.2008, 00:55)

sophie:-
Hi stu

I used your gallery that's work everywhere except in safari mac any way to make it works?
thanks a lot for answer
(07.07.2008, 10:22)

Aurelie:-
What amazing lightbox....

But impossible to introduce it in my main page...it works ( perfectly) alone but when in main page..something is missing..or maybe I can't see it.
NB: code in separate css sheet
and other effects (scriptaculous) in main page. does it create incompatibilities?

Can anyone help me?

THANKS A LOT!
(21.07.2008, 19:17)

Linda:-
Stu--wonderful work on this gallery. I'd like to use it on a public university web site, with your permission. Is there a way to vary the number of thumbnails/size of thumbnails on each of the categories so they all fit within the same centered box? For example, a 3 x 3 grid on one category, a 4 x 4 grid on another, and a 2 x 2 grid on another. Thanks for your help!
(30.07.2008, 20:00)

DBKay:-
Hi there, I love this site, you've done wonderful work. I had a quick, probably stupid question, but what does Mk.3 stand for? Thanks.
(12.09.2008, 03:34)

jeni:-
This is great I am trying to incorporate this into my website and it only works if I add it to the header section and then it shows up on every page and idea what I need to do to keep it only on my homepage?
(20.06.2009, 09:10)

Tamara:-
Lovely gallery, but can not get it to work on IE8.
Seems to stay on the introduction page - any idea how to solve???
(02.07.2009, 10:41)

Greg Sullivan:-
Stu how many images are allowed to be added to each page using the Cross browser multi-browser photo gallery Mk.3
(20.07.2009, 19:36)

Jackie:-
Cross browser multi-browser photo gallery Mk.3
This is a lovely photo gallery -- could you please tell me what to change in the code to keep it from disappearing when not hovering on gallery. I'm pretty new at this but I'd love to use it if I may?
(30.12.2011, 22:47)

Stu:-
Because this uses :hover to open the gallery it is not possible to keep it open when moving off the gallery. This would require javascript.
(31.12.2011, 08:16)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page