I would like to setup my gallery web page so that when a user clicks on the thumbnail image, a window pops up displaying a larger view of the image. I do not mean a pop up window as in a browser window but a window that is loaded within that same page and can be closed. I am not exactly sure how I would go about doing this. Any ideas?
See Lightbox2. http://www.huddletogether.com/projects/lightbox2/
If you can use jQuery I would recommend
Thickbox
These are also very good
Fancybox
Pirobox
Nyromodal
ImageBox
And a third option: jQuery Tools overlay
I believe the technique you're after is a lightbox (I think it was the first of these).
Thickbox is an awesome jQuery based clone, or there's about a million others out there :-)
Much advance option would be Magnific Or Gettopup
Related
I have created a popup window and below is my script.
var action="generateCertificate";
var url=contextPath +"/MyPage/MyPage.do?actionToPerform="+action;
var myWindow=window.open(url,"","width=500,height=500");
And the script is successfully creating a popup window.
now my issue is when i click on the background of my page the popupbox is getting hided.
how to mask the background when popupbox is fired.
Plz help me.
You can use jQuery BlockUI Plugin : BlockUI.
No. There is no way to make a popup window modal. As the name itself suggests that it is a separate window.
If you want, you can use showModalDialog() in Javascript. The dialog allows you to include a jsp or html page inside
http://msdn.microsoft.com/en-us/library/ie/ms536759(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog
Also as suggested by others above, you can go for jQuery.
Is it possible using the Lightbox2 script from
http://lokeshdhakar.com/projects/lightbox2/
to make the images inside a "lightbox", a url.
Lets say i would open a lightbox, and then click on the image inside it, that image could bring me to a new page or some other link.
Tried to look for this more than an hour on google but couldn't find anything with it !
If anyone has any ideas, let me know !
thanks
If you are open to alternatives, I suggest you try Fancybox
http://fancybox.net/
I'm looking for an example that shows how to display an image as an overlay in a browser while blurring/greying out the contents from the main browser window, here's an example...
http://fstopgear.com/product/satori-exp/view
Just click on any backpack image, then click any part of the browser to close the image..that's pretty much the functionality I'm looking for, I'm assuming there's a script or package that provides such control?
There are plenty of solutions as jQuery plugins for this. What you want is called "modal" or "overlay" window.
I recommend FancyBox: http://fancybox.net/
But also check out ColorBox: http://www.jacklmoore.com/colorbox
There are lot of solutions to get this done in jQuery. Please have a look into the following url's:
http://leandrovieira.com/projects/jquery/lightbox/
http://jquery.com/demo/thickbox/
http://fancyapps.com/fancybox/#examples
I was wondering how to get images similar to www.eskimodesign.com.au or facebook where you click on a photo and it pop outs and darkens the background.
(Try clicking on a project or image on the eskimo website)
You should check out
Lightbox
Fancybox
Thickbox
Slimbox
Check this out too: Rounding Up the Top 10 jQuery Lightbox Scripts
By the sounds of it, looks like you're looking for a lightbox component.
There are a lot out there each to their own design.
http://lokeshdhakar.com/projects/lightbox2/
You'll need to have jquery enabled while using this as well.
http://jquery.com/
Some other lightboxes
http://www.huddletogether.com/projects/lightbox/
http://fancybox.net/
I use DOM window script for Lightboxes on my website. Is there any way to block scroll on main page when Lightbox appears and unblock when it disappears?
Or, maybe, you can advice better Lightbox script?
Thanks.
User this to disable or enable window scrollbar :
document.body.style.overflow="hidden";
on show your lightbox and
document.body.style.overflow="visible";
on hiding your lightbox.
but if your are really looking for a better lightbox library you can try this jQuery plugin :
jQuery Lightbox Plugin