lightbox

I'm developing a little portfolio where I can choose a category and when I click it, the content (thumbnails) of that category will be shown (this is via an array). e.g. photography[0] = <a href="..." rel="lightbox" /><img ... /></a> photography[1] = <a href="..." rel="lightbox" /><img ... /></a> At first the site shows the content of all categories and when I click a thumbnail it activates lightbox, however if I choose a category and then press one of the remaining thumbnails is simply leads to the image and does not open the image with lightbox. This is how the thumbnails look like on the

I don't think it's possible from what I've read, but wanted to see if anyone else was in a similar situation and found a more elegent solution to this problem. Basically I have a site I am building, nothing fancy, which consists of a header section, and then one big iframe to display the content of the page in. I know, I know, iframe are generally looked upon with displeasure, but for my needs, it works wonders. My issue, is that in the header of the page, I have a simple google search box (basically just an html form), and have set the target as my iframe. Obviously when searching for

I wonder if there is a way to use the fancybox with Image maps? <img src="\path\" usemap="#Map"> <map name="Map" id="Map" > <area shape="poly" coords="0,0,0,328,145,328" href="#" /> <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" /> <area shape="poly" coords="328,328,328,0,180,0" href="#" /> </map> So you want to show a single image in a fancybox with an image map? It is possible to add the map to the image of fancybox in a couple of ways, For example, you could add it to an image once its loaded, the image will load with the id fancybox-img , so using the oncomplete() callback

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to, max-height: 150px; max-width: 200px; width: 120px; height: 120px; I get images that are all the same size but the aspect ratio is stretched ruining the images. is there not a way to resize the image container and not the image instead? allowing me to keep the aspect ratio. but resize the image still. (I dont mind if i cut off some of the image.) Thanks in advance! this is a known problem with CSS resizing, unless all images

A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple: $('.readmore').each(function(i){ $(this).popup(); }); and the link would look like this: <a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a> The plugin could also accept arguments for width, height, a different url, and more data to pass through. The problem I'm facing right now is printing the lightbox. I set it up so that the lightbox has a print button at the top of the box. That link would open up a new window and print that window. This

I am using jQuery litebox . After adding JS and CSS files I got this error TypeError: $(...).on is not a function at this line in js file "return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {" Can anybody help me to understand the problem here? I am doing this implementation in CakePHP 1.3. The problem may be if you are using older version of jQuery. Because older versions of jQuery have 'live' method instead of 'on' The usual cause of this is that you're also using Prototype, MooTools, or some other library that makes use of the $ symbol, and you're including

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine) html: <div id="facebox" style="top: 0px; left: 0px; display: block;"> <div class="popup"> <div class="body"> <div class="content_light"> <div class="Lcontent_left"></div> <div class="Lcontent_right"> <div class="Lright_content"></div> </div> </div> </div> </div> </div> This is my