So I'm using https://sachinchoolur.github.io/lightgallery.js/ for my gallery and it's great.
When user clicks and image it opens and all is well.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
However, I have an edge case where I want the user to be able to press another image on the page to open the gallery.
Let's pretend it's this a tag
<a id="magic_start" href="">
I thought I'd be able to do this:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
I've also tried, click() and trigger('click') but they don't work.
I think because lightgallery.js is it's own man, so to speak.
But it does nothing. No errors, but does nothing.
Any suggestions?
Edit:
My current workaround is...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
But this takes a way from UX due to having to reload page.
The trigger function needs to be called on the img element, and not the outer a element.
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<a id="magic_start" href="#">CLICK TO OPEN</a>
<div id="lightgallery">
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
</div>
Related
Would like to ask a question about the lightbox lightbox kit ~
sorry for my bad english, but i try to make it clear.
I have an image in the DOM using the lightbox kit to achieve a lightbox effect when clicking on the image.
But today in the project there is a DOM that is rendered as follows, and he will continue to be rendered by PHP with multiple duplicate DOMs!
Because it is explained in the use of lightbox that if data-lightbox="example" is set with the same name, it will be regarded as a group to achieve the effect of rotation. How can I make the data-lightbox with the same name? Wouldn't he be able to switch photos left and right?
img{
width: 300px;
max-height:50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="example" href="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80
" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80" />
</a>
<!-- How to disable image switching left and right when there are duplicate data-lightbox="example" names -->
<a class="example" href="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" />
</a>
</div>
img{
width: 300px;
max-height:50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="example" href="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80
" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80" />
</a>
<!-- How to disable image switching left and right when there are duplicate data-lightbox="example" names -->
<a class="example" href="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" />
</a>
</div>
I am using fancybox. Here it fancybox will display on clicking somewhere but i need to display after page scroll. Now i am looking for fancybox. Anyone can suggest me any plugin like fancybox with scrolling not clicking.
Now i have tried with fancybox so here is code of fancybox. But you can help me with any plugin.
$(document).ready(function() {
$(".fancybox").fancybox();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>
Mousewheel event listener taken from this: Get mouse wheel events in jQuery?
I also created a jsFiddle: https://jsfiddle.net/jmL7zgzt/
$(document).ready(function() {
$(".fancybox").fancybox();
});
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll up
if (!$("html").hasClass("fancybox-enabled")) $('.fancybox').click()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>
One simple way to stay with your fancybox plugin would be to trigger a click on a image on scroll.
$(window).one('scroll', function(){
$('img').trigger("click")
})
I have this code which is meant to use jQuery so that when the 'Show navigation' button is clicked, that button will disappear, a 'Hide Navigation' button will appear, as will the Navigation options. The hope would be then that the 'Hide' button would do the opposite. I can get the show hide buttons to disappear and reappear accordingly, but the navigation options just stay in place.
Here is the code:
var nav = function(){
$('.navtoggle').click(function(){
$('#navbar').animate({
top:'10px'
}, 200);
$('.navtoggle').animate({
top:'-40px'
}, 200);
$('.navexit').animate({
top:'0px'
}, 200);
});
$('.navexit').click(function(){
$('#navbar').animate({
top:'-40px'
}, 200);
$('.navtoggle').animate({
top:'0px'
}, 200);
$('.navexit').animate({
top:'-40px'
}, 200);
});
};
$(document).ready(nav);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src="navanimate.js"></script>
<div id="top_container">
<div id ="navbar">
<a class="navigation" href="index.html"><p>Home</p></a>
<a class="navigation" href="CV.html"><p>CV</p></a>
<a class="navigation" href="Video.html"><p>Video</p></a>
<a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
<a class="navigation" href="Coursework.html"><p>Coursework</p></a>
<a class="navigation" href="Animation.html"><p>Animation</p></a>
</div>
<div class ="navtoggle">Show Navigation</div>
<div class ="navexit">Hide Navigation</div>
<h1>Home Page</h1>
</div>
<div id="main_content">
<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
<ul><h3>About Me</h3>
<li>Candidate Number: 106244</li>
<li>Course: Games and Multimedia Environments</li>
<li>Year of Study: First year</li>
</ul>
<img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
</div>
<div id="social_links">
<ul>Find Me Here
<li><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/>Facebook</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/>Tumblr</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/>DeviantArt</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>
I have a working inner-zoomable image using the code below and I would like to modify this to an image gallery with zoom of the selected image element, but cannot figure out how to begin. What I would like is for the image source in the second hyperlink below ("img_02" src=") to substitute for the first. Anyone shed any light please?
<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script src="../jquery.elevatezoom.js"></script>
</head>
<body>
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="zoom_01">
<a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
<!--initiate the plugin and pass the id of the div containing gallery images-->
<script>
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair",});
</script>
</body>
</html>
1) ID should never be used more then once in a single html ~ you have used "zoom_01" 3 times use it only on the first image.
2) To create a gallery you should use this code:
$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
Here is the fixed HTML:
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="gallery">
<a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
And yes the demo site HTMl code is wrong :) ~ i will send them a mail.
<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
In this coding, I want change image and change href also.
here when user click on addtocart.png image, I want to change image to pleasewait.png and when user click on pleasewait.png image, I want to change href like "url2.html", but when i apply my coding image changed but url2.html page also redirect directly.
<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
Script
$('#BigSwatch').on({
'click': function(){
$('#test').attr('src','pleasewait.png');
$('#BigSwatch').attr('href','url2.html');
}
});
HTML
<a href="#" id=BigSwatch><img src="addtocart.png" /></a>
in JS
$("#BigSwatch").on("click","img",function(){
$(this).attr("src","pleasewait.png");// here your image path will set
$(this).closest("#BigSwatch").attr("href","ekhle.html");
});
The better way is you can put an anchor with background image. You can follow the simple process -
Keep an anchor with background image "addToCart.png" and with class "addToCart"
On click change the class to "pleasewait" which will change the background-image to "pleasewait.png"
On Click write a function to check, if it has class "addToCart" then prevent default redirection else go to "url2.html".
HTML:
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
I Hope this would work fine.
You can do this with your HTML mark up only like this
<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"
onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>
Live Demo
I have used images from google. :)
try this code.
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
window.location="irl.html";
}
else{
info.src="pleasewait.png";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"
width="100" height="100"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
window.location="url.html";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" width="100"
height="100"/>
<input type="radio" id="rad"
onChange="switchHref()" />Click
</body>
</html>