We Keep Coding

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>

This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

How Do I make a <div> slide into view when a button is clicked?

I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton">Join The Battle
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>

I think this jsfiddle may be useful for you.
$(document).ready(function(){
$('#hide').click(function(){
var hidden = $('.hidden');
hidden.hide('slide', {direction: 'left'}, 400);
});
$('#show').click(function(){
var hidden = $('.hidden');
hidden.show('slide', {direction: 'left'}, 400);
});
});
https://jsfiddle.net/ZQTFq/3372/
Modify the code depending on your needs.

Why jquery load page doesn't work in my page

Why my fancybox doesn't work when I replace div id=book0... and add jquery.load like that in my page:
<div id="book0" class="withoutborder0"></div>
<div id="book1" class="withoutborder1"></div>
<div id="book2" class="withoutborder2"></div>
<div id="book3" class="withoutborder3"></div>
<div id="book4" class="withoutborder4"></div>
$('#book0').load('import.html #book0img');
$('#book1').load('import.html #book1img');
$('#book2').load('import.html #book2img');
$('#book3').load('import.html #book3img');
$('#book4').load('import.html #book4img');
Here is my page with jquery.load
http://www.booclin.ovh/tom/365/book.html
Here is the link and the code of my page without jquery.load who works fine
http://www.booclin.ovh/tom/365/bookb.html
code
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
console.clear();
$('#logohomepage').click(function() {
$('body').css({ 'overflow': 'auto' });
});
function showDiv() {
document.getElementById('logohomepage').style.display = "none";
document.getElementById('allgalleries').style.display = "block";
}
$("#launcherbook0, #launcherbook0b, #launcherbook0c").on("click", function(){
$("a.fancyboxgallerybook0").eq(0).trigger("click");
});
$("#launcherbook1, #launcherbook1b").on("click", function(){
$("a.fancyboxgallerybook1").eq(0).trigger("click");
});
$("#launcherbook2, #launcherbook2b").on("click", function(){
$("a.fancyboxgallerybook2").eq(0).trigger("click");
});
$("#launcherbook3, #launcherbook3b").on("click", function(){
$("a.fancyboxgallerybook3").eq(0).trigger("click");
});
$("#launcherbook4, #launcherbook4b").on("click", function(){
$("a.fancyboxgallerybook4").eq(0).trigger("click");
});
$("#launcherinfo, #launcherinfob").on("click", function(){
$("#infofull").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallerybook0, #closegallerybook1, #closegallerybook2, #closegallerybook3, #closegallerybook4, #infofull" ).on( "click", function(){ $.fancybox.close(); return false; });
});
$(".fancyboxthumbnailsgallerybook0, .hidemenubook0").click(function(){
$(".secondleftpartbook0").show();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook0").click(function(){
$(".secondleftpartbook0").hide();
$("#book0").show();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook1, .hidemenubook1").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").show();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook1").click(function(){
$(".secondleftpartbook1").hide();
$("#book0").hide();
$("#book1").show();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook2, .hidemenubook2").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").show();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook2").click(function(){
$(".secondleftpartbook2").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").show();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook3, .hidemenubook3").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").show();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook3").click(function(){
$(".secondleftpartbook3").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").show();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook4, .hidemenubook4").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").show();
$(".partmenuhideninfo").show();
});
$("#closegallerybook4").click(function(){
$(".secondleftpartbook4").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").show();
$("#infofull").hide();
});
$(".hidemenuinfo").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").hide();
$("#infofull").show();
});
$("#infofull").click(function(){
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
});
function toggleOverlay () {
var overlay = document.querySelector("div");
overlay.classList.toggle('hide-overlaymenu');
document.body.style.overflow = "hidden";
}
$('#menumodalclose').click(function() {
$('body').css({
'overflow': 'scroll'
});
});
$(function() {
var salt = Math.floor(Math.random() * 1000),
time;
function load_script() {
$('#backgroundhomepage').remove();
$.getScript("index/js/backgroundhome.js?s=" + salt, function() {
$('script:last').attr('id', 'myscript');
salt = Math.floor(Math.random() * 1000);
time = setTimeout(function() {
load_script();
}, 5 * 1000);
});
}
load_script();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/js/modernizr.custom.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/fancybox.js"></script>
<script id="backgroundhomepage" src="http://www.booclin.ovh/tom/365/index/js/backgroundhome.js"></script>
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.css" type="text/css">
<div class="hide-overlaymenu">
<div class="overlaymenu">
<div class="overlaymenu-content">
<div class="buttonmenuinside-container">
<a id="menumodalclose" class="buttonmenuinside" onclick="toggleOverlay()">
<i class="fa fa-toggle-off"></i>
<i class="fa fa-toggle-on"></i>
<img style="height:20px; width:20px; opacity:0.5;" src="http://www.starkasia.com/wp-content/uploads/icons/menuclose.png" alt="">
</a>
</div>
<div class="menucontent">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0" data-fancybox-group="book0" href="javascript:void(0);">
BOOK0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2" data-fancybox-group="book1" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3" data-fancybox-group="book1" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4" data-fancybox-group="book1" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfo" href="javascript:void(0);">INFO</a>
</div>
</div>
</div>
</div>
<div id="logohomepage" style="display:inline;" onclick="showDiv()">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0b" data-fancybox-group="book0" href="javascript:void(0);">
<span style="width: 100%; max-width:120px; position: absolute; top: 100px; left:-100%; right:-100%; margin:auto;">
CLICK ME</span>
</a>
</div>
<div id="allgalleries" style="display:none;">
<div class="leftpart">
<div class="firstleftpart">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0c" data-fancybox-group="book0" href="javascript:void(0);">BOOK 0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfob" href="javascript:void(0);">INFO</a>
<br/><br/><br/>
</div>
<div style="display:none;" class="secondleftpartbook0">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook0" class="opengallerybook0" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook1">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook1" class="opengallerybook1" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook2">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook2" class="opengallerybook2" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook3">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook3" class="opengallerybook3" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook4">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook4" class="opengallerybook4" href="javascript:;">
THUMBNAILS</a>
</div>
<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()">
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a>
</div>
<div class="rightpart">
<div id="globalgalerie">
<div id="book0" class="withoutborder0">
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" alt=""/>
</a>
</div>
<div id="book1" class="withoutborder1">
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" alt=""/>
</a>
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" alt=""/>
</a>
</div>
<div id="book2" class="withoutborder2">
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" alt=""/>
</a>
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" alt=""/>
</a>
</div>
<div id="book3" class="withoutborder3">
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" alt=""/>
</a>
</div>
<div id="book4" class="withoutborder4">
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" alt=""/>
</a>
</div>
<div id="infofull">
<span class="spanbold">INFO</span><br/><br/>
BLABLABLA
</div>
</div>
</div>
</div>

.load() method is assynchroneous...
Meaning it has a delay to get the response.
This delay is long enought for the script to execute completely before a response is received.
Moreover, you are initiating your FancyBox instances before calling the loads.
So the elements (ancors) you provide for it are obviously missing.
So a solution is to modify this line:
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
as a function:
function fancyInit(x){
$("#book"+x).find("a.fancyboxgallerybook"+x).fancybox();
}
Then use the .load() callback:
$('#book0').load('import.html #book0img',fancyInit(0));
$('#book1').load('import.html #book1img',fancyInit(1));
$('#book2').load('import.html #book2img',fancyInit(2));
$('#book3').load('import.html #book3img',fancyInit(3));
$('#book4').load('import.html #book4img',fancyInit(4));
The callback exectutes when .load() as completed successfully.

When clicking on icon in a li how do I determine if its the first li in the ul?

I have a ul and each li inside it has a trash icon and when I press the trash I want to know if its the first icon in the ul. What I'm trying always returns false. I also tried
$(this).parents('li').is(':first');
with no luck
$("ul#sortable").on("click", ".removethumb", function (event) {
event.preventDefault();
$isThumbPrimary = $(this).is(':first');
});
<ul id="sortable" style="list-style-type: none; padding-left: 0px;">
#foreach (var image in Model.ViewImages.OrderBy(i => i.Ordering)) {
<li id="#image.YogaSpaceImageId" class="col-sm-6 col-md-4 imagethumbs" data-yogaspaceid="#Model.YogaSpaceId">
<div class="thumbnail" style="background-color: lightgrey;">
<a id="#image.YogaSpaceImageId" class="close removethumb" href="#" style="padding-top: 2px; position: absolute; z-index: 3000;"><span class="glyphicon glyphicon-trash" aria-hidden="true" style="padding: 5px;"></span></a>
#{ var base64 = Convert.ToBase64String(image.ImageThumbnail); var thumbSrc = String.Format("data:image/gif;base64,{0}", base64); var base64Modal = Convert.ToBase64String(image.Image); var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
var imageId = "pop" + image.YogaSpaceImageId; var imagesourceId = "imagesource" + image.YogaSpaceImageId; } #*
<a class="image" id="#imageId" href="" data-toggle="modal" data-target="#myModal">
<img id="#imagesourceId" src="#thumbSrc" data-imagesrc="#imgSrcModal" alt="image not found" width="203" height="136" />
</a>*#
<a class="image" id="#imageId" href="" data-toggle="modal" data-target="#myModal" style="width: 100%; height: 100%; position: relative;">
<img id="#imagesourceId" src="#thumbSrc" data-imagesrc="#imgSrcModal" alt="image not found" style="width: 100%; height: 100%" #*width="203" height="136" *# />
</a>
</div>
</li>
}
</ul>

:first should be :first-child
$("ul#sortable").on("click", ".removethumb", function(event) {
event.preventDefault();
//$isThumbPrimary = $(this).is(':first');
alert($(this).is(':first-child'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="sortable">
<li class="removethumb">one</li>
<li class="removethumb">two</li>
<li class="removethumb">three</li>
</ul>
Given the nesting of your elements I think you actually need $(this).closest('li').is(':first-child')
$("ul#sortable").on("click", ".removethumb", function(event) {
event.preventDefault();
event.stopPropagation();
alert($(this).closest('li').is(':first-child'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="sortable">
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">one</a>
</div>
</li>
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">two</a>
</div>
</li>
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">three</a>
</div>
</li>
</ul>