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>
Related
I have an .epub file that does not have any effect or animation while user turns between the pages
I use Turn.js library for it be it does not work .I can not open it with eBook readers softwares.
Here is my Epub folder Directory
Before add Turn.js library
After add Turn.js library
And here is my chap_0001.xhtml Html code
<head>
<title>How to Win Every Argument</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
</head>
<body dir="auto">
<h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
<div class="offset">
<div class="flipbook-viewport"><!-- Added-->
<div class="container"><!-- Added-->
<div class="flipbook"><!-- Added-->
<div style="width: 100.0%;">
<img src="images/img_0001.png" alt="Picture #1"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<div style="width: 37.238758708043065%;">
<img src="images/img_0002.png" alt="Picture #2"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
<div style="width: 45.59848005066498%;">
<img src="images/img_0003.png" alt="Picture #3"/>
</div>
<!-- rest of pages -->
</div>
</div>
</div>
</div>
And here is my chap_0001.xhtml Js code
<!-- language: lang-js -->
//Added after using Turn.js library
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width: 922,
// Height
height: 600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['style/basic.css'],
complete: loadApp
});
I only copy library folders and change chap_0001.xhtml file . That's it.
Any help will be appreciated
I am not sure what particular issues you had with your script. One main issue is the extra spans you included in your html:
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
They were considered "pages" and therefor turn.js turned the page to blank span that does not have the same size as other elements.
Anyway, this is a working example with your html: JSFiddle Example
I could not include working code here because turn.js is served over http. I had to copy the entire code and paste into js part which is more than stackoverflow text limit
How can I return back to the base page by clicking on an image?
Picture1 will be displayed after clicking First.
How can I return back to the selection page? (To continue with my selections).
<h3>First</h3>
<h3>Secong</h3>
Instead of linking to the image file, link to a new HTML file, and place the image on that file using an <img> tag. On that same HTML file, you can include a link back to the original page using a <a> tag.
homepage.html
Go to first image.
Go to second image.
first-image.html
Back to Homepage
<img src="picture1.jpg" alt="a photograph of a kitten">
second-image.html
Back to Homepage
<img src="picture2.jpg" alt="a photograph of a puppy">
Here is result oriented approach to your question by zooming image to full page and closes on click. I think this is what you need:
$(document).ready(function(){
$('img[data-enlargable]').addClass('img-enlargable').click(function(){
$("#main").hide();
var src = $(this).attr('src');
$('<div>').css({
background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
backgroundSize: 'contain',
width:'100%', height:'100%',
position:'fixed',
zIndex:'10000',
top:'0', left:'0',
cursor: 'zoom-out'
}).click(function(){
$(this).remove();
$("#main").show();
}).appendTo('body');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div>
<h1>First Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://i.imgur.com/7KpCS0Y.jpg" />
</div>
<div>
<h1>Second Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://media.alienwarearena.com/media/1327-l.jpg" />
</div>
</div>
</body>
</html>
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>
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.