simple jquery lightbox for displaying images - javascript

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/)

Related

how to build a not preload slide show by javascript?

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.

How to create a link with CLASS in javascript?

This is my first question here in StackOverflow, but I have used the site many times, and you always helped me with your answers. Now its time to share my doubt, because I could not find a similar one here.
I have a flash banner rotator in my website, that uses a XML to configure the images and links that will rotate. I don't have acess to the source, because it is a commercial version.
I can not use jQuery to rotate the images, because I have a drop down menu and it always fall behind the banner. I tried z-index but it does not work on IE.
One of the images is to show a video, so, when someone click on it, I want a lightbox to open and play the video (I will use Sublimevideo.com for this)
The XML now is like this:
<slideshow>
<photo image="path/image.jpg" url="link" target="_blank"></photo>
</slideshow>
I need to add a CLASS to this link, because I want it to be opened in a lightbox!!!
So I was wondering to do something like this:
window.location.href='link class="lightbox"';
But this is not a option, it did not worked!
So how can I add a CLASS in the link at the xml file?
I was wondering using javascript, but if you have any other option, it will be GREAT!
Thanks a lot in advance and sorry for my English, I'm from Brazil =P
You could do it with an horrendous jQuery hack:
$('*[href*="path/image.jpg"]')​.addClass('lightbox');​​​​​​​​​​
Of course, if you know what the HTML will look like you could use a far more specific / less ugly selector.
A much better solution would be to add the class on the server, which sounds like it should be possible.

Does anyone know of any cool JQuery plugins to display a profile picture and acompaning text in a box?

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

Website popout page design

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

How to implement an image gallery similar to google image search

I am new to JavaScript and jQuery. I have to develop a website in which an image gallery with similar effects as in google image search needs to be implemented. I am searching for ready-made scripts to incorporate with my project. Where can I find something like this for free or how would I go about implementing it using JavaScript/jQuery.
Regards
Omayr
This is a pretty specific example, and I would guess most plugins would be more "widgety". If I was creating this I would create the page layout first, wrapping each "page of results" in a single div.
Then when the user clicks "Show More Results" you can use one of jQuery's AJAX methods to load in more "pages" of images.
I assume you have paginate the image search result, you could try by doing:
assign each image in a div tag (e.g
Bind the function by using jquery ".each" and ".hover" function (when mouse-over, enlarge it by set the css's width and height)
There are alot more... I cant type it all...
Hi you can have a look here:
http://forum.yola.com/yola/topics/awesome_photo_gallery_code_for_your_website
It also links an example test page...
hope it helps

Categories