Develop Reference

Close popup on content click in jsImageBox

I am using the [jsImageBox jquery plugin][1]. It allows one to make an image gallery. Anyone know how to close the image popup by clicking anywhere on the image instead of having to click the x on top right.
]: http://static.tumblr.com/qrevc1p/3FWlxvqbb/jsibox_basic.js

You can use the jquery on click behavior to close the image dialog.
If your images div is with id="images"
$("#images").click(function(){
$("#images").hide(); // or change the element attribute which ever closes the div
});
Please share your code to help you better.

Looking through the code reveals that you can set your own methods of closing the image. Simply call the jsiBoxClose() function included in jsibox_basic.js.

Jquery click not working as expected

I have a wordpress site.
I add custom thumbnails in product section, it shows vertically. I just add the jquery code following:
$(document).ready(function(){
$('.active-thumb-link a').click(function(e){
e.preventDefault();
var imgSrc = $(this).attr('href');
var imgFind = $(".flickity-slider > div > a ").each(function(){
if($(this).attr('href') == imgSrc){
$(this).closest('div').css({"position": "absolute", "left": "0%"});
}
});
});
Code Motive: When user click on thumbnail image =, this fucntion get the "href" attribute of the clicked image. This "href" and image src is same that i want to display in product image div. i also add some css in jquery code for display the image. Everything is working fine.
Issue is: Suppose 4 thumbnails appearing as ascending order like"
THUNMB1
THUNMB2
THUNMB3
THUNMB4
When i click first time thumb1,thumb2,thumb3,thumb4 it works,
But when click like this order
1.) Click thumb1 works good
2.) Click thumb2 works good
3.) Click thumb3 works good
4.) **Click thumb2 Not works after that nothing works when i click on previously clicked thumbnail again. This is the main issue**
Thanks! Plz help me

You need to reset the images that are not being clicked back to their normal position. Inside your if-statement you could set all images to whatever first position they initially have, and then change the position of the closest one, like your already doing.

Focus to an image of a HTML page

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.

I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}

cannot get thickbox to open / tb_show function ignored 2nd attempt

I have two links that should open up thickbox's in iframes but only one works (the one with the id of product_photo_zoom_url2). I have the following jquery code that works when this code (in first code box) s removed from the markup. This code loads a picture zoom function. See complete markup below. All that happens when the first zoom image is clicked is the page goes to the top so it seems that the .click bind is being ignored? How do I get this to work?
Here is a link to a sample page... When you hover over the product picture the zoom works but if you click on the picture it seems to follow the href"#" rather than the click bind. If I disable the zoom feature then all works fine. So why is the zoom messing up the click bind and what can I do to fix it so both Thickbox and the zoom work together.
sample page
onload="vZoom.add(this, '/v/vspfiles/photos/70367301P-2.jpg');" /
jquery code..
var titleattr = $("a#product_photo_zoom_url").attr("title");
function picurl()
{
tb_show(titleattr, '/PhotoDetails.asp?ShowDESC=N&ProductCode='+ global_URL_Encode_Current_ProductCode + '&TB_iframe=true&height=600&width=520');return false;
}
$("a#product_photo_zoom_url").click(picurl);
$("a#product_photo_zoom_url2").click(picurl);
$("a#product_photo_zoom_url").attr('href', '#');
$("a#product_photo_zoom_url2").attr('href', '#');
Here is the html code...
<a id="product_photo_zoom_url" href="/PhotoGallery.asp?ProductCode=70367301P"
title="70367301P Ignition Box">
<img id="product_photo" src="/v/vspfiles/photos/70367301P-2T.jpg"
border="0" alt="70367301P Ignition Box" onload="vZoom.add(this, '/v/vspfiles/photos /70367301P-2.jpg');" /></a>
<a id="product_photo_zoom_url2" href="/PhotoGallery.asp?ProductCode=70367301P" title="70367301P Ignition Box">

I assume you know that Firefox + Firebug are your best friends for debugging JS problems. If not, get thee to the addons.mozilla.org website pronto!

lightbox not working correctly

I have a problem in lightbox. This is the link when i clicked login form appears.
<a href="index.php?g=login.html" title="Login Form"
rel="gb_page_center[425, 220,login.html]">Login</a>
When I click the link before page loads, page opens in new window. light box isn't working correctly. I need to block this link utill lightbox loads.
How can I do this in javascript?
click the top corner link login
Link: http://www.clubforeducation.com/

Did you try adding some attribute like onclick='return false;' ?

You might want to include your lightbox javascript code at the bottom of the page.
Or hide all your images initially while page is loading; once page is loaded, you can show all links again with something like below:
window.onload = function()
{
// note: using jquery here
$("a.lightboxlinks").css('display':'inline');
};