CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tim
Tim

Reputation: 13258

jQuery -> open a new smaller window in a window

I have a website and there is an image on it. What I want: If I click on the image, I want to open a window inside this window. I often see this with images, I want to show in a bigger size.

I have a thumbnail on the site and then by clicking it, the background will be grey and the image opens in a layer on top of the site with the big image.

I want the same, if it is possible with jQuery, and I want to display a bigger image and some text. How can this be done with jQuery?

Best Regards.

Upvotes: 0

Views: 1438

Answers (6)

hunter
hunter

Reputation: 63542

What you're trying to do is create a modal dialog which is usually just a container with the appropriate CSS that makes it sit on top of the other HTML on the page.

There are hundreds of jQuery plug ins to do this. Here's an article describing 19 of them:

19 jQuery Modal Boxes to Improve your UI - Nov 1, 2009

jQuery Modal Box Round Up - Mar 16, 2009

Top 10 jQuery Modal Box Plugins - Dec 29, 2009

2009, the year of the "my preferred modal dialog" blog posts

Ones I've used and like:

Upvotes: 3

Prisoner
Prisoner

Reputation: 27628

You are looking for something like the ThickBox plugin. Go to the link and click "Examples" then "Demo".

There is also LightBox with is an alternative jQuery plugin.

Upvotes: 1

Kris Ivanov
Kris Ivanov

Reputation: 10598

you can use http://leandrovieira.com/projects/jquery/lightbox/, it is jQuery plugin

Upvotes: 1

DoctorLouie
DoctorLouie

Reputation: 2674

Yep try a simple solution: Fancybox! Enjoy, I'm sure this will go a long way with what you want from your website, and its easy to integrate! And yes this requires jQuery, and has nicer functionality than native jQuery lightbox component.

Upvotes: 1

Sotiris
Sotiris

Reputation: 40096

you are looking for jquery lightBox plugin.

some ways to use it are the following:

<script type="text/javascript">
$(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

For more information visit the link above.

An alternative is prettyPhoto or any jquery plugin for photo gallery.

Upvotes: 1

FatherStorm
FatherStorm

Reputation: 7183

you're probably thinking of lightbox or something similar

Upvotes: 1

Related Questions