I want to have 4 boxes that can be clicked and pop out with text and can scroll.
Similar to the projects page here: http://www.visionslighting.com
However i would like it to be in html/javascript or similar instead of flash.
i have found this: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
which is exactly what i want only with images.
any help is greatly appreciated.
This is easily accomplished with the jquery-ui. They have a function called dialog that you can tell to be a modal(the box that floats on the screen).
I think you're looking for a javascript lightbox. Check out this one: http://defunkt.io/facebox/
You can find even more here: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
Related
I cant believe I am asking this - but I spend the last TWO HOURS looking for a simple jquery lightbox to give to my students to learn how to implement...
What I need is something that is very simple:
I have a bunch of images and when I click on them I need a lightbox to open with a (different) image that I can specify...I just cant find anything that does simply that. Of course the lightbox will need to behave like a standard lightbox (X- close button, scale to size of image, have a line of caption or so)
something like:
$('.this-image').click(function(){
awesomelightbox.open('new url');
})
Most of the lightboxes I checked open either the same image that was clicked, or has a gazillion options that my students wont understand.
I tried:
- LightBox
- ColorBox
- FancyBox
- VisualLightbox
- Featherlight
Nothing suits my requirement :(
Does anyone know any simple lightbox that does what I mentioned? I would greatly appreciated any pointers.
Actually, using Fancybox you can do it. I went to their "How To" and they have an example. Look at the last bit of code on the page. If you are only trying to display 2 different images you can use their method. Notice how they have a small.jpg and a big.jpg, so it essence they are using 2 different images. This way they can use one image for thumbnail and a larger one for the actual fancy box. Is this what you are looking for?
EDIT: Or if you would like to use my plugin you are welcome to source it from my site. Here is an example, check sourcecode for usage.
http://tylerteaching.com/coolbox/
I'd recommend using Maginific (http://dimsemenov.com/plugins/magnific-popup/), or Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)
So I'm trying to make a gallery and when the user click on a picture I want it to open on top of everything in it's original size.
I only have experience with html and css right now but willing to give JS and jQuery etc a try if necessary. Thank you in advance!
(I didn't provide any code since I don't have a problem with it)
this might help you Shadow Box
See the images.
Update:
fancybox demo
i would like to make a simple slide show like this:
http://www.businessinsider.com/useful-apps-2013-8#quip-is-a-brand-new-mobile-word-processing-app-quip-is-made-by-facebooks-former-cto-the-app-makes-it-easy-to-create-documents-on-the-go-but-it-still-works-on-your-desktop-too-2
i am new to javascript, may i ask is there any example to build a slide show like above?
it seems the picture will only be loaded from the server side when the user click the previous/next button.
and is there any way to speed us the script as well?
many thanks.
The two simplest sliders/gallery plugins are fancybox and flexislider. Their are plenty of tutorials and help online to use these.
I'm trying to create a login system like http://us.battle.net/en/. The page is fully functional, then when you click on the "Log In" link, the page becomes dark and you can no longer interact with any of the images or links from the original page. A square box comes up, which you can interact with to login to the site, put you can still see everything from the original page.
I've been searching and searching and I can't find what I'm looking for. I just need some ideas to get me pointed in the right direction and I can go from there.
Thanks everyone!
Maybe something like jQuery UI Dialog could help you. Checkout the modal example.
Have a look into Colorbox - it's a jQuery plugin, very easy to use, and does exactly what you want.
The effect of graying out the page and showing a popup dialogue box is called a "modal" dialogue box.
I believe the functionality you are referring to is called a lightbox.
There are dozens of jQuery lightbox plugins around, a quick Google search suffices; FancyBox, for example, is a pretty nice one.
Ive seen a few however they dont seem to allow you to write much text alongside an image, its mostly a brief title or caption display whereas I have quite alot of text that I would like to be displayed alongside an image. preferably in some kind of light box. Id be very grateful if anyone has any suggestions. Im new to Jquery :)
Have you had a look at jQueryUI's Dialog? It's quite nice and you can just pump any HTML directly into it.
I'm using JQuery galleryview for my project. here is the link on the development server. Click on one of the button for example:
http://ssdev01.uis.kent.edu/VotingApplication/Main.aspx