I've got a question that might seem pretty simple or stupid, but I'm a kind of new to this thing so...
I need to get the image name (filename) of the picture that is currently being displayed in the carousel (created with Slick). There's a carousel showing the only one image at a time and containing let's say 7 images.
Could you please advise?
Thanks!
Using afterChange event, you can track the active slide right after the transition is made. Then $(slick.$slides.get(currentSlide)) gives the whole slide element where we try to find the image ant it's src attribute.
$(document).ready(function(){
$('.slider').slick({
dots: true,
autoplay: true,
autoplaySpeed: 1000,
infinite: true,
speed: 1000,
slide: 'div',
cssEase: 'linear'
});
$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
//Here I do split the `src` attribute value because I'm using an absolute path.
// $(slick.$slides.get(currentSlide)) gives the whole slide
var CurrentImg=$(slick.$slides.get(currentSlide)).find('img').attr('src').split('/').pop();
console.log(CurrentImg)
});
});
img{
width:200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="slider">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Wikipedia-logo_ka.png">Wiki</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/HTML5_oval_logo.png">Html5</div>
<div><img src="https://upload.wikimedia.org/wikipedia/fr/b/bb/SoundCloud_logo.png">SoundCloud</div>
</div>
Related
Hi everyone I'm trying to figure out how to add a font awesome icon with a pulse feature inside this script I'm a newbie so I don't really know what I'm doing.
I want to edit before the text that says call or zoom
window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: 'Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }
Any ideas would be great
You should be able to simply add the Font Awesome HTML snippet to the text blurb.
Make sure to escape quotes if needed. And of course, check that you've linked Font Awesome's css file.
For example, this snippet works for me (I picked a phone icon with fa-pulse animation):
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!-- Calendly -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Initialize floating badge with FA icon with some animation -->
<script type="text/javascript">window.onload=function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: '<i class="fas fa-phone fa-pulse"></i> Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }</script>
How to disable click on .lg-img-wrap?
I have tried lot of solutions but none seems to work on lightgallery.
Tried 1
$(".lg-img-wrap").children().unbind('click');
Tried 2
$(".noclick").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
Tried 3
pointer-events:none //to a css property
I would like to prevent closing of light gallery when user clicks outside the image.
Black margin is visible when image ratio is not same as that of screen size.
Please check image below for reference.
Light Gallery I am using: https://github.com/sachinchoolur/lightGallery
Add closeable: false to your lightGallery initialization. Here's their API describing that feature.
Working Codepen
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
<a href="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" />
</a>
</div>
<script type="text/javascript">
$('#lightgallery').lightGallery({
closable: false
});
</script>
</html>
$(".lg-img-wrap").off("click");
or
$(".lg-img-wrap").prop("disabled",true);
or
$('.lg-img-wrap"').click(false);
I hope it works for you. good work.
I've tried to make the dialog modal option work for quite a while now, but still haven't figured out what went wrong and why it isn't working for me.
Tried looking at other posts on stackoverflow and the dialog widget page on the official jQueryUI website, but i still can't solve it.
Here are my codes:
<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery-
ui.css"
<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery-
ui.structure.css">
<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery-
ui.theme.css">
</head>
<body>
<div id="container">
<div id="messageBox" title="Message">
<p> Thank you for visiting our website </p>
</div>
</div>
<script src="JQuery-3.3.1-Library.js"></script>
<script src="JQueryUI-1.12.1/jquery-ui.js"></script>
<script>
$("document").ready(function(){
$("#messageBox").dialog({show: {effect: "bounce", duration:1500}})
.dialog({hide: {effect: "explode", duration:1500}})
.dialog({closeOnEscape: false})
.dialog({modal:true});
</script>
</body>
Hoping that someone would help me.
I recommend cdn instead of local files (this isn't fix your problem, but possibly come with some benefits, read this for more info, and you missed one "});"
I tested this code and it worked normally, check if you have any errors on your chrome console and tell us if you have
<body>
<div id="container">
<div id="messageBox" title="Message">
<p> Thank you for visiting our website </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script>
$("document").ready(function () {
$("#messageBox").dialog({
show: {
effect: "bounce",
duration: 1500
}
})
.dialog({
hide: {
effect: "explode",
duration: 1500
}
})
.dialog({
closeOnEscape: false
})
.dialog({
modal: true
});
}); // you missed this
</script>
Upon clicking the image, I want the image to pop out and show message. But i don't know how to do it.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
<a href="Images/royalpalace.jpg" data-lightbox="image-1" data-title="RoyalPalace">
<img src="Images/royalpalace.jpg" width="19.7%" height="200px">
</a>
You need to link the appropriate files in the given order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">
And make sure the image paths are valid.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">
<a href="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" data-lightbox="image-1" data-title="RoyalPalace">
<img src="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" width="200px">
</a>
Here is one way to do it:
First, move the <img> out of the <a> tag, or else it will redirect the user to another page, then to pop the image out, write this in a js script:
document.getElementsByTagName("img")[0].addEventListener("click", function () {
this.style.display = "none";
alert("Your message here");
})
You can enhance this by giving the <img> an id attribute and then using document.getElementById("<Your img id>") to access it.
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>