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.
Related
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.
Can anyone help me here? Js bin link. I am trying to build a photo upload div for the user. My plan is if a user hovers over the picture i show him option to upload a picture. If he leaves the mouse he sees the profile picture only. But the problem there is when the user leaves the mouse,mouseleave event hides entire div including the picture. I am not expert in jquery. Mistakes are the i way i hide this i think. But i can't figure out how only to hide the div created in mouseenter event. This is the script.
var imgUploadDiv = $('#promo-area');
imgUploadDiv.mouseenter(function() {
imgUploadDiv.append( "<div class='uploader'> <i class='fa fa-picture-o fa-4x' id='uploader-icon'></i></div>" );
});
imgUploadDiv.mouseleave(function() {
imgUploadDiv.hide();
});
Please check out the js bin link i mentioned to understand the problem clearly.
try using $( ".uploader" ).hide(); instead.
What you're doing now is hiding the entire div because you're using your cached variable imgUploadDiv which is set to mean the entire uploading area.
do it like this if you want only to hide the childs of imgUploadDiv which have the class .uploader
imgUploadDiv.mouseleave(function() {
imgUploadDiv.children('.uploader').hide();
});
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();
}
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
I've been trying to get this code to work. I have a hidden div that shows a flash video using the object/embed method.
This is the js code I'm using.
jQuery(document).ready(function(){
jQuery("a[id^='scrshot_']").fancybox(
{
'autoDimensions' : false,
'width' : 640,
'height' : 360
});
return false;});
I'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.
Example of my html code.
<a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a>
<div class='showvid' id='showvid_1'>my embedded code here</div>
Instead of hiding the div, make it visible but wrap it inside another div that is hidden.
(I don't know why fancybox doesn't toggle the visibility, rather annoying.)
try adding this to your jQuery(document).ready(function(){
jQuery('.scrshot').live('click',function(){
jQuery('.showvid').hide(); //hide any that might be open
jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for
});
Have you looked at fancybox documentation/blog?
http://fancybox.net/blog (4. Show youtube clips. this must help);
http://fancybox.net/howto;
http://fancybox.net/api;