I have an image gallery page, where each image can be "tagged" with multiple tags. Each tag button is displayed on a tab-bar. By default all images are displayed, but when a single tag button is clicked, only images tagged with that tag are displayed.
I'm using jQuery lightBox plugin to display larger versions of images and I would like to see all selected images in the lightBox (by clicking previous/next links).
$(document).ready
(
function()
{
// this works ok
$('#gallery div a').lightBox();
}
);
Everything works great until I filter the images. By default all images are available in the lightBox (and I would like lightBox to have only those filtered images).
I even tried to do this on filter event:
$('#gallery div.' + tag + ' a').lightBox();
Where "tag" is a string containing only active tag by which the images in the gallery are filtered. This works kinda shady, because the lightBox properly displays only the filtered images, but it has some strange behavior:
when resizing the box for the next image, animation is a bit messed-up
image counter displays the first state result (for example 7 of 25), and then the filtered one (for example 7 of 9)
My actual questions are:
Is there a way to remove lightBox behavior once it has been set on a link?
Is there an alternative to lightBox, just to be able to "unplug" it easily?
This will disable the lightBox behaviour (as it appears to be nothing but a click event handler):
$('#gallery div a').unbind('click');
Then, the following works like a charm:
$('#gallery div.' + tag + ' a').lightBox();
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.
I'm trying to develop a page template with a slideshow, static text content, and more text content in (up to 4) tabs. Slideshow is not in the tab panel area.
When page loads, I'd like it to play a "main section" slideshow
When tab 1 is clicked, I'd like the slideshow to switch to a "tab-1" set of images
When tab 2 is clicked, "tab-2" set of images...
etc...
I have a working script that a friend wrote for me that lets me specify which images to play in the slideshow upon page load, and it determines a random play order upon page load, crossfades images, and loops.
Now I'd like the same thing to be triggered upon tab selection, with different specified images.
So I'd like:
Page loads: see "main section" slideshow of specified images, random order, crossfading, looping
Click tab X: see "tab-X" slideshow of other specified images, random/fade/loop, in place of previously running images.
Click tab X again: text panel collapses and "main section" slideshow is restarted - doesn't have to be same order or in the same place as where it left off, just that group of images.
Sorta like this (JSFiddle):
$(document).ready(function(){
$('#thumbOne').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto";
});
});
$(document).ready(function(){
$('#thumbTwo').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoTwo";
});
});
$(document).ready(function(){
$('#thumbThree').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoThree";
});
});
but thumbnails = tabs for content panels, and large images = slideshows.
So are the tabs basically pagers? I don't want/need prev/next navigation for the slideshow - just constant flow...
I'm really new to js, and while I can see what a good amount of code is doing, I'm not able to wrap my head around what I'd need to make this work.
Asked this before, maybe not too clearly, but with more specifics: jQuery Responsive Tabs to start new slideshow/replace existing slideshow upon tab selection?
Got this JSFiddle up, but being new to this stuff, I didn't get the Responsive Tabs working right in the result pane - didn't get separation of html/js right, so I left it up, mostly functional like this...
Slideshow script is in the HTML on my JSFiddle. For Responsive Tabs (tabs switch to accordion based on media query) info, see here.
My first instinct would be to repopulate the slideshow from a JSON document. The slideshow would read the state of the tabs, and load the relevant content into the array driving the slideshow.
I'll try to work up a fiddle to demonstrate this a bit later - at which point I'll edit this answer.
Matthew is on the right track. You only need a single slideshow, and you want to repopulate it with different data for each tab. There's no need to actually have multiple sets of markup or multiple containers.
There are also a bunch of issues with your javascript - you only want a single $(document).ready function, in which you can stick all the other stuff. There's also really no good reason to do a getElementById if you're already using jQuery - $("#mainPhoto") is much nicer.
Make a bunch of slideshow objects or arrays which point to your images (could be Matthew's json files, could just be variables)
So here's pseudocode for what I would do:
var slideShowOne = {
images: ["img1.jpg", "img2.jpg", "img3.jpg"],
name: "Cats"
};
var slideShowTwo = {
images: ["img4.jpg", "img5.jpg", "img6.jpg"],
name: "Dogs"
};
Then in your click actions you could do something like
$("#tabOne").click(function(){
stop the slideshow;
clear out the #slideshowContainer;
slideShowOne.images.foreach(function(img)
{$("#slideshowContainer").append("<img src='"+img+"'/>")})
start the slideshow back up;
})
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.
Edit: Example - http://jsfiddle.net/JWx7z/9/
I'm using a lightbox plugin https://github.com/premasagar/nitelite and I'm hacking it a bit to get it to behave how I want.
The lightbox is made up of two elements: the overlay (dark slightly transparent window), and the content containing window.
Normally when a lightbox is closed the overlay is faded out and removed. When opening a lightbox it is added and faded in.
However when traversing from lightbox to another lightbox this makes the transition undesirable. I have hacked it so the old overlay remains, and the new overlay is aborted if we are going between 2 lightboxes, so it is just the content window that changes.
This means of course the overlay is a seperate instance of the lightbox to the current content window. Which in turn means when I try and close the lightbox by clicking on the overlay, only the overlay is removed - leaving the content window still on my page.
...
$(this.overlay)
.bind('add', function() {
this.node
.one('click', function(){
lb.close();
});
});
Note: Each instance of the lightbox is called lb.
I can remove this window by adding an artificial click to the close button:
$('#lightbox p.close a').click();
but this has reprecussions later as some remnants of lb still exist - for example if I want to open a new lightbox it thinks a lightbox already exists and we're moving between the two, so doesn't add an overlay as it thinks there is already one there.
How can I work it so all instances of lb are closed when clicking on the overlay?
Thanks
Edit: Code for aborting addition of overlay if coming from a lightbox
...
open: function(contents, transition){
var lb = this;
if (transition !== 0) {
this.overlay.add();
}
...
You can change your overlay click function to fadeOut the .nitelite-lightbox-container as well on close:
$(this.overlay)
.bind('add', function(){
this.node
.one('click', function(){
...
$(this).next('.nitelite-lightbox-container').fadeOut();
lb.close();
});
});
See fiddle.
It alerts "lb already exists" when you reopen the lightbox, however it still behaves correctly.
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;