Mobile Friendly Website

CSSPLAY

Doing it with style

CSS oneBox Lightbox 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

Tim:-
I am testing this for intergration into a website im currently working on, however this only seems to work in google chrome. in firefox the onebox appears as though no css is attached and in safari the thumbnails are styled but when clicked do not expand into the lightbox view.

the same appears to be true of one of your html5/css3 menues which i am also trying to integrate into a test site... i can supply html/css if you wish to check ?
(10.10.2011, 10:21)

Stu:-
The demo here works in IE8, IE9, Firefox, Opera, Safari and Chrome.
(20.01.2012, 11:11)

jacob:-
It's kind of cheating to have a javascript to get this working in IE considering it's all supposed to be pure CSS..
(24.03.2012, 17:09)

Stu:-
The .htc file is just to get this to work in IE7 and IE8 which has a problem with the :active styling. It will work without this in IE9 and IE10.
(24.03.2012, 17:24)

Paul Godden:-
Have rolled this out on a new test site (will paypal ya when it goes live) but the client has noticed it doesn't work on an ipad. The images pop up but then they can't get rid of them. Test site here..

www.maffrobinson.co.uk/newsite/paintings.htm

Is this a known problem? fixable? Never gonna be fixed?
(25.10.2012, 12:21)

Stu:-
This was produced before the iPad became so popular. It is possible to fix this but would require a change in the code and stylesheet.
(25.10.2012, 13:03)

Paul Godden:-
Thanks Stu, I guess what I was asking is any chance its simple and you'd be interested in rolling it out. Otherwise I may have to pull your code and find another way.
(26.10.2012, 14:47)

Stu:-
Now working on the iPad, iPhone and iPod Touch
(26.10.2012, 16:22)

Paul Godden:-
Thats great Stu, thanks for that. Watch your Paypal account :-)
(26.10.2012, 18:30)

Chris Raymond:-
Stu, this is perfect for my needs, BUT when I put it into a page in Wordpress, Wordpress insists on wrapping the images in a <p> tag, and so none of the css works anymore, I'm guessing because it is no longer targeting the right element because of your use of the adjacent selector. I cannot get WP to stop putting in <p>, and even when I just put a <div> around the images, it still stops working. When I use Firebug to remove the <p> or <div>, the whole thing works.

I have tried to alter your css to find the right selector to target but your use of the tilde is I think the issue and I don't understand how to modify it to account for the images being wrapped in a <div> or <p>. I would greatly appreciate it if you had the time to help, as I would like to show my artwork using css only zooming.
(01.01.2013, 22:50)

Chris Raymond:-
Update: I figured it out!! The sibling selectors had to have the same parent div. And I got rid of WP's <p> to boot by putting the whole onebox into a div.
(02.01.2013, 00:44)

Niko:-
Hey Stu,

Really love these simple CSS lightboxes, but does the lightbox content have to be images. Is it possible for the shifting content to be text?

Cheers and thanks!
(30.01.2013, 06:19)

Stu:-
This lightbox uses content: to populate each popup panel so the content is limited to images and plain text.
It is possible to have the content as html code but it would require an alternative method of showing the popup panel.
I do have other demos that use alternative methods that would be suitable.
(30.01.2013, 08:08)

Mayya:-
Thank you very much for making this great (and simple!) litebox available. I have made a donation and hope it is enough?

For some reason, probably my stupidity, it doesn't work in IE8 on my site, not that that matters a great deal.
(31.01.2014, 13:35)

Mayya:-
Is there any chance this could be modified to work with android as well as ipad/iphone?
(08.02.2014, 11:57)

Stu:-
This works on my Android tablet using the Android browser and also the Chrome, Firefox and Opera browsers for Android.
(08.02.2014, 13:09)



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