Opening images in lightbox format
-
Hi there,
I have set up my site so the initial images on the home page link to secondary, more expanded images. As you will see, the images that load up are just displayed on a plain white page, to the left. I’d like them to open up on a scrolling lightbox (if that’s the way you describe it)….any suggestions as to how I can achieve this?
My website is:
http://www.noblecatdesign.comThanks!!
-
Just search the WordPress Plugins database for “lightbox” and you’ll find a bunch of plugins that should get you where you want to go. Take a look at Simple Lightbox, for example.
Great, thank you! Will have a look
Hi again,
I’ve successfully installed the Simple Lightbox plug in….and it works, but I was needing the image that opens up to be scrolling, not tightly packed into the whole frame….is there a bit go coding I need to add/amend to make this work?
Thanks!
I’m not sure what you mean about scrolling. Are you wanting a lightbox slideshow (i.e., multiple images) effect, or are you wanting the image to have scroll bars if it’s too large for the screen?
Also, can you provide a website that does this?
Or are you looking at a lightbox that allows for zoom?
Hi, no it’s not a case of wanting a slide show. I want to be able to click on each individual image on the home page, and a ‘lightbox’ image opens up with the full web design piece which is a decent size and has scroll bars so the viewer can scroll down the whole design, rather than see the whole design in one go, but very small… hope this makes sense!
thanks!It’s ok..think I’ve sussed it!
Thanks for your help……actually, no I haven’t! At the moment the lightbox image opens up but the scroll bar is on the main page…but I’d like the scroll bar on the light box so I scroll down the image while the main page remains static in the background…..any ideas folks?
Cheers!
It looks like what you need to do is tweak the CSS for your lightbox by adding the following custom CSS, in your child theme’s style.css:
.slb_content { height: auto; max-height: 600px; overflow-y: scroll; }Set the max-height to whatever you want, I just picked 600 as a good basic number, or you could get fancy and add some jQuery to detect the user’s window.innerheight to set it dynamically.
By the way, you have some 404’s popping up for files you didn’t include in your child theme’s folder:
"NetworkError: 404 Not Found - http://www.noblecatdesign.com/wp-content/themes/thestorychild/images/fonts/PexetoArrows.woff" "NetworkError: 404 Not Found - http://www.noblecatdesign.com/wp-content/themes/thestorychild/images/fonts/PexetoArrows.ttf" "NetworkError: 404 Not Found - http://www.noblecatdesign.com/wp-content/themes/thestorychild/images/cs-loader-w.gif"Hi,
Thanks loads for that! Will have a go and add that…..is there anywhere in particular I add it in the CSS…just at the bottom? (sorry if that’s a stupid question!)Thanks too for letting me know about the errors…I copied across the Style.css file, and also the CSS folder from the original theme…ok well I’ll copy all of the folders/files across to the child then, just to cover my bases!
Oh, don’t copy all the files/folders over to the child theme, just the ones that are giving you the 404s. The benefit of having a child theme is that you can update the parent theme without overwriting the changes you’ve made to the child theme, so you should only have files in the child theme that you have overridden with your own changes, or, as in this case, files the developer of the parent theme requires but didn’t correctly set up the path so they would be used from the parent theme if a child theme is added.
You should add the code to the bottom of your child theme’s CSS file. CSS is read top-to-bottom, so declarations that occur later will override earlier declarations, with some exceptions. That’s why you import the parent theme’s CSS first, then add your customizations to your child theme’s style.css after that.
Ah I see…thanks loads for the help there and thanks also for the code snippet.
I’ve gone ahead and added the code at the bottom of the CSS but there is no change to the lightbox…arrrgh!The lightbox is now opening the way it should, but the content is scrunched. It looks like you now need to add this to your child theme’s CSS:
#slb_viewer_wrap .slb_theme_slb_baseline .slb_template_tag_item_content > * { height: auto;You may be caching something in your browser or on your server if it’s not working for you, or maybe it could be a browser issue. I’m using Firefox.
Ah-ha…was using Chrome…just opened up via Firefox and works…but yes..a tad scrunchy! Thanks loads for that extra code will try it now (really really appreciate the help!) 🙂
The topic ‘Opening images in lightbox format’ is closed to new replies.