Develop Reference

jQuery Lightbox gallery only working once

I am trying to build my own simple jQuery lightbox gallery. My logic behind it is as follows: Only thumbnails will be shown & created at first. These link to the full size images.
<section class="gallery-set">
<a href="img/about/gallery/a1.1.jpg">
<img src="img/about/gallery/thumb1.1.jpg" alt=""
height="192" width="383">
</a>
<a href="img/about/gallery/a1.jpg">
<img src="img/about/gallery/thumb1.jpg" alt=""
height="192" width="383">
</a>
<a href="img/about/gallery/a2.1.jpg">
<img src="img/about/gallery/thumb2.1.jpg" alt=""
height="192" width="383">
</a>
</section>
Therefore, when you click on any of these thumbnails, I dynamically create an overlay-lightbox and all full size images, showing only the one that links to the thumbnail you clicked. Although the rest of the images has been created too, these are hidden for now.
function lightBox() {
var gallery = $('.gallery-set'),
overlay = $('<div/>', {id: 'overlay'});
overlay.appendTo('body').hide();
gallery.on('click', 'a', function(event) {
event.preventDefault();
var clickedThumb = $(this),
clickedThumbPath = $(this).attr('href'),
clickedImg = $('<img>', {src: clickedThumbPath, alt: 'fullSizeImage', class: 'current'}),
prevThumbs = clickedThumb.prevAll(),
nextThumbs = clickedThumb.nextAll();
prevThumbs.each(function() {
var prevImg = $('<img>', {src: $(this).attr('href'), class: 'prev non-current'});
prevImg.appendTo(overlay);
});
clickedImg.appendTo(overlay);
nextThumbs.each(function() {
var nextImg = $('<img>', {src: $(this).attr('href'), class: 'next non-current'});
nextImg.appendTo(overlay);
});
overlay.show();
})
.....
.....
}
Now, when you click the second thumbnail, jQuery dynamically creates all the fullsize images and this is how HTML structure looks like:
Now that I have this structure, I can easily traverse the full sized images by left and right arrows. The current image gets hidden and the next one gets shown. For this logic I am using two classes, current and non-current where the first one has set display to block and the second one to none. This piece of code is within the lightbox() function:
$(document).on('keyup', function(event) {
var pressed = event.keyCode || event.which,
arrow = {left: 37, right: 39};
switch(pressed) {
case arrow.left:
var curr = overlay.find('.current'),
prev = curr.prev();
if(curr.hasClass('current')) {
curr.removeClass('current').addClass('non-current');
} else {
curr.addClass('non-current');
}
if(prev.hasClass('non-current')) {
prev.removeClass('non-current').addClass('current');
} else {
prev.addClass('current');
}
break;
case arrow.right:
var curr = overlay.find('.current'),
next = curr.next();
curr.removeClass('current').addClass('non-current');
next.removeClass('non-current').addClass('current');
break;
}
});
overlay.on('click', function() {
overlay.hide();
overlay.find('img').remove();
});
});
Everything works fine the first time. However, once I close the lightbox and try to open it again, the correct image opens but the arrows functionality is gone. I do not understand why - since I am dynamically creating the full sized images everytime user clicks on the gallery and putting event listeners (arrows) only once these have been created.
Just for the record, I am calling this lightbox() function from the HTML file right before the closing tag.
Any ideas much appreciated. Also, if there's a simpler / better way of doing this, please do let me know! I don't want to use any plugin as I think this is pretty simple and straightforward. Or, I thought it WOULD BE SIMPLE I should rather say.

Efficient jQuery/JS - avoiding copy-paste the same code again & again

I need to write an efficient code in order to keep it simple & code file small, also I want to use the knowledge I hopefully get from here in future codes.
UPDATE: Just to be clear - my example is fixed "buttons" on browser window side & if you click on one of them, it takes you to div with same ID (look at code below).
IMAGE:
MY CODE EXAMPLE:
//Smooth Scroll Menu Links
jQuery('.div1').on('click', function(e) {
e.preventDefault();
jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800);
});
//I have to copy-paste it 1000 times & only change the ".div1" to something else
//Note that I need a solution with different class names, not "div1", "div2" etc but e.g "location", "potato", "car" etc.
How to make this code working without writing same lines for every single div?
There got to be a way to get class from item you click & then scroll to item with same name ID, right? Or any other way to keep codes shorter in that kind of situations - otherwise it's just copy-paste-huge-file fest.

You can give each button a class so you can catch them all, than go to the element you want to scroll to by looking at the attribute of the clicked button :)
HTML
<div class="buttons" data-scroll="div1">div1</div>
<div class="buttons" data-scroll="div2">div2</div>
<div class="buttons" data-scroll="div3">div3</div>
<div class="content" id="div1">some content</div>
<div class="content" id="div2">some content</div>
<div class="content" id="div3">some content</div>
JS
$('.buttons').on('click', function(e) {
e.preventDefault();
var scrollTarget = $(this).data("scroll");
scrollme(scrollTarget);
function scrollme(target) {
$('html,body').animate({scrollTop:$("#"+target).offset().top}, 800);
}
});
example: http://jsfiddle.net/7gd66kr1/1/

try this i hope will work with you :
jQuery('div').on('click', function(e) {
e.preventDefault();
jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800);
});
note that : this function will aplay on all divs in page

I think there are more than an unique solution. If you don't want to modify your HTML, then you need a condition to determine if the clicked element is an "active" one:
jQuery('div').on('click', function(e) {
var id = $(this).attr('class');
var scrollto = $('#' + id);
if(scrollto.length > 0) {
e.preventDefault();
jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
}
});
If you "can" modify your HTML, it's wise to add some attribute to the "active" elements (the ones that are buttons), so you know they scroll the page, or put them inside a container. The attribute you add may be a class or any other valid attribute (I recommend "rel", but might be "data" as spotted by #Iliya Reyzis , who selects by class and scrolls to "data") and select them by it:
<div class="div1" rel="mybutton">div1</div>
jQuery("[rel='mybutton']").on('click', function(e) {
var id = $(this).attr('class');
var scrollto = $('#' + id);
e.preventDefault();
jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
});
Hope it helps!!

Loop through element and change based on link attribute

Trying to figure this out. I am inexperienced at jQuery, and not understanding how to loop through elements and match one.
I have 3 divs:
<div class="first-image">
<img src="images/first.png">
</div>
<div class="second-image">
<img src="images/second.png">
</div>
<div class="third-image">
<img src="images/third.png">
</div>
And off to the side, links in a div named 'copy' with rel = first-image, etc.:
...
Clicking the link will fade up the image in the associated div (using GSAP TweenMax)
Here is the function I've been working on to do this... but I am not fully understanding how to loop through all the "rel" elements, and make a match to the one that has been clicked on.
<script>
//pause slideshow on members to ledger when text is clicked, and show associated image
$(function() {
$('.copy').on('click','a',function(e) {
e.preventDefault();
var slideName = $(this).attr('rel');
$("rel").each(function(i){
if (this.rel == slideName) {
console.log(this);
}
});
//var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
//autoAlpha:1
//});
});
});
</script>
What am I doing wrong? I don't even get an error in my browser. :-(
Thanks to the answer below, I got farther. Here is my revised code.
$('[rel]').each(function(k, v){
if (v == slideName) {
var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
autoAlpha:1
});
} else {
var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
autoAlpha:0
});
}
});
});
This is starting to work, but makes the screenshots appear and then instantly fade out. And it only works once. Any thoughts?

Add brackets around rel, like so:
$('[rel]').each(function() {
if ($(this).attr('rel') == slideName) {
console.log(this);
}
});

Show div only if specific other divs have been clicked

I am new to jQuery (this is my second attempt). I looked for answers via Google and StackOverflow and I have tried quite a few but have yet to figure out the last part of my problem. Any help or guidance is most appreciated.
What I want to do is have a bunch of images(apple, pumpkin, candle, etc) that when clicked, fade the image out and then cross off the image's name in a text list. Then, if you click on specific sets of those images they will show a div containing a deal.
An example: If you click on the images of apple, pear and pumpkin (in any order) a deal will show.
Another example: You click on the images of candle, apple, pumpkin and key(in any order) a deal will show.
Another example: You click on all image items(in any order) a deal shows.
I have the first part working (click on an image, it fades out and crosses its name off the list).
What I need help with is checking to see if certain combinations of images have been clicked and if so show the deal div.
I was thinking I could use index for this but I haven't been able to make it work. Maybe there is a better way? Thanks for any guidance.
Here is my test code so far (JSFIDDLE):
HTML
<div class="pic1">
<img width="50" height="50" src="http://us.123rf.com/400wm/400/400/chudtsankov/chudtsankov1208/chudtsankov120800002/14670247-cartoon-red-apple.jpg" />
</div>
</div>
<div class="pic2">
<img width="50" height="50" src="http://www.in.gov/visitindiana/blog/wp-content/uploads/2009/09/pumpkin.gif" />
</div>
<div class="pic3">
<img width="50" height="50" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Candle_icon.png" />
</div>
<div class="pic4">
<img width="50" height="50" src="http://tasty-dishes.com/data_images/encyclopedia/pear/pear-06.jpg" />
</div>
<div class="pic5">
<img width="50" height="50" src="http://free.clipartof.com/57-Free-Cartoon-Gray-Field-Mouse-Clipart-Illustration.jpg" />
</div>
<div class="pic6">
<img width="50" height="50" src="http://images.wisegeek.com/brass-key.jpg" />
</div>
<div id="items">
<p class="apple">Apple</p>
<p class="pumpkin">Pumpkin</p>
<p class="candle">Candle</p>
<p class="pear">Pear</p>
<p class="mouse">Mouse</p>
<p class="key">Key</p>
</div>
<div class="someText">Reveal Deal #1 after finding apple, candle and mouse</div>
<div class="deal1">This is deal box #1! You must have found apple, candle and mouse! WIN</div>
<div class="someText">Reveal Deal #2 after finding key, pumpkin, pear and mouse!</div>
<div class="deal2">This is deal box #2! You must have found key, pumpkin, pear and mouse!</div>
<div class="someText">Reveal Deal #3 after finding ALL objects!</div>
<div class="deal3">This is deal box #3! You must have ALL the items!</div>
<div id="output"></div>`
CSS
.intro, .someText {
color:#333;
font-size:16px;
font-weight: bold;
}
.deal1, .deal2, .deal3 {
font-size: 18px;
color: red;
}
Javascript: jQuery
$(document).ready(function () {
$('.deal1, .deal2, .deal3').hide();
$('.pic1').click(function () {
$(this).data('clicked');
$('#items p.apple').wrap('<strike>');
$(".pic1").fadeOut("slow");
});
$('.pic2').click(function () {
$(this).data('clicked');
$("#items p.pumpkin").wrap("<strike>");
$(".pic2").fadeOut("slow");
});
$('.pic3').click(function () {
$(this).data('clicked');
$("#items p.candle").wrap("<strike>");
$(".pic3").fadeOut("slow");
});
$('.pic4').click(function () {
$(this).data('clicked');
$("#items p.pear").wrap("<strike>");
$(".pic4").fadeOut("slow");
});
$('.pic5').click(function () {
$(this).data('clicked');
$("#items p.mouse").wrap("<strike>");
$(".pic5").fadeOut("slow");
});
$('.pic6').click(function () {
$(this).data('clicked');
$("#items p.key").wrap("<strike>");
$(".pic6").fadeOut("slow");
});
$(document).on('click', '*', function (e) {
e.stopPropagation();
var tag = this.tagName;
var index = $(tag).index(this); // doesn't work, as it gives the total no. elements
$('#output').html(index);
});
});

first of all you can give your divs a corresponding data value to their p items for instance if you implement your div ( and all the other divs)
<div class="pic" data="pumpkin">
instead of
<div class="pic2">
You can write an almost oneliner with jquery
$('.pic').click(function () {
$("#items p."+$(this).attr("data")).wrap("<strike>");
$(this).fadeOut("slow");
});
you can define your sets:
set1 = ["apple","pumpkin"]
and after every click you can check clicked paragraphes with
$(document).ready(function () {
var set1 = ["apple", "candle", "mouse"]
$('.deal1, .deal2, .deal3').hide();
$('.pic').click(function () {
$("#items p." + $(this).attr("data")).wrap("<strike>").addClass("strike");
$(this).fadeOut("slow");
//test for set1
set1Completed = true;
for (i = 0; i < set1.length; i++) {
if ($("p.strike." + set1[i]).length==0) {
set1Completed = false;
break;
}
}
if (set1Completed) {
$('div.deal1').fadeIn(); // or fadeIn whatever u want
}
});

Create a custom event:
$('.HiddenItem').css({display:'none'}).on('somethingElseClicked',function(){
$(this).show();
});
And then trigger it with the other click:
$('.ItemToTrigger').on('click',function(e){
$('.HiddenItem').trigger('somethingElseClicked');
});
This is obviously supergeneralized, but it gives the framework necessary to trigger the event you want.
EDIT
Alright, so you will need to store each value for the clicks needed, as well as the total needed. I always prefer to use object-based variables rather than globals, so:
var click = {
deal1:[0,2],
deal2:[0,3],
deal3:[0,5]
}
This creates arrays for each deal, the first being the number of clicks that have happened and the second being the total needed minus 1. You will then increment the "clicks that have happened" value, as well as prevent it from allowing double-clicks, by the JS described later. First, I recommend adding a generic class to all clickable items, as well as the deal items they are associated with, and verifying that way. The HTML:
<div class="picItem d1" data-fruit="apple">
<div class="picItem d2" data-fruit="pumpkin">
<div class="picItem d1" data-fruit="candle">
<div class="picItem d2" data-fruit="pear">
<div class="picItem d1 d2" data-fruit="mouse">
<div class="picItem d2" data-fruit="key">
And the JS I described:
$('.picItem').on('click',function(){
var $this = $(this),
$fruit = $this.data('fruit');
$this.fadeOut('slow');
if($this.hasClass('d1') && !$this.hasClass('clicked1')){
if(click.deal1[0] < click.deal1[1]){
click.deal1[0]++;
$this.addClass('clicked1');
} else {
$('.deal1').trigger('showDeal');
}
}
if($this.hasClass('d2') && !$this.hasClass('clicked2')){
if(click.deal2[0] < click.deal2[1]){
click.deal2[0]++;
$this.addClass('clicked2');
} else {
$('.deal2').trigger('showDeal');
}
}
if(!$this.hasClass('clicked3')){
if(click.deal3[0] < click.deal3[1]){
click.deal3[0]++;
$this.addClass('clicked3');
} else {
$('.deal3').trigger('showDeal');
}
}
$('.'+$fruit).wrap("<strike>");
});
The last if is for all elements clicked, hence not the need for adding a class and checking. The final piece grabs the associated data attribute and strikes it out.
Now you just trigger the event:
$('.deal1,.deal2,.deal3').on('showDeal',function(){
$(this).show();
});
This event will only be triggered when the appropriate number of clicks has been reached. Here is the jsFiddle you gave me updated to show it is working as requested.
If you want to only allow one deal, you would just turn off the event after being triggered:
var $allDeals = $('.deal1,.deal2,.deal3');
$allDeals.on('showDeal',function(){
$(this).show();
if($(this).hasClass('deal3')){
// this is to prevent deal 1 and deal 2 showing, since the criteria for them is also met
$allDeals.not('.deal3').hide();
}
// this turns off all other deals
$allDeals.off('showDeal');
$('.picItem').off('click');
});
Not sure if you would need it or not, figured I would include it just in case. Here is an updated jsFiddle to show that case working.

How to detect mouseleave() on two elements at once?

Answer can be in vanilla js or jQuery. I want to hide a div with the id "myDiv" if the user is no longer hovering over a link with the id "myLink" or a span with the id "mySpan". If the user has his mouse over either element "myDiv" will still show, but the second the user is not hover over either of the two (doesn't matter which element the user's mouse leaves first) "myDiv" will disappear from the face of existence.
In other words this is how I detect mouse leave on one element:
$('#someElement').mouseleave(function() {
// do something
});
but how to say (in a way that will actually work):
$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {
// do something
});
How to detect this?

Something like this should work:
var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
count++;
$('#myDiv').show();
}).mouseleave(function(){
count--;
if (!count) {
$('#myDiv').hide();
}
});
jsfiddle

You could use a multiple selector:
$("#someElement, #someOtherElement").mouseleave(function() {
// Do something.
});

You can beautifully use setTimeout() to give the mouseleave() function some "tolerance", that means if you leave the divs but re-enter one of them within a given period of time, it does not trigger the hide() function.
Here is the code (added to lonesomeday's answer):
var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
count++;
$('#d3').show();
}).mouseleave(function(){
count--;
setTimeout(function () {
if (!count) {
$('#d3').hide();
}
}, tolerance);
});
http://jsfiddle.net/pFTfm/195/

I think, it's your solution!!!
$(document).ready(function() {
var someOtherElement = "";
$("#someElement").hover(function(){
var someOtherElement = $(this).attr("href");
$(someOtherElement).show();
});
$("#someElement").mouseleave(function(){
var someOtherElement= $(this).attr("href");
$(someOtherElement).mouseenter(function(){
$(someOtherElement).show();
});
$(someOtherElement).mouseleave(function(){
$(someOtherElement).hide();
});
});
});
----
html
----
<div id="someElement">
<ul>
<li>element1</li>
<li>element2</li>
</ul>
</div>
<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>

While the answer from lonesomeday is perfectly valid I changed my html to have both elements in one container. I originally wanted to avoid this hence I had to do more refactoring for my clients in other html templates, but I think it will pay out on the long term.
<div id="my-container">
<div class="elem1">Foo</div>
<div class="elem2">Bar</div>
</div>
$('#my-container').mouseleave(function() { console.log("left"); });