I am trying to add "selected" class to the "url hash button".
Look at the original demo: http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html
I want that <a class="button secondary url" href="#zero">zero</a> will change to <a class="button secondary url selected" href="#zero">zero</a> when clicking on it, or item autoplay on it, or drag/swipe item on it.
I tried for one button to test but it is not working:
HTML:
<div id="owl-appt" class="owl-carousel">
<div class="item one" data-hash="one"><img src="img/gallery/home/appt1/1.jpg" alt=""></div>
<div class="item two" data-hash="two"><img src="img/gallery/home/appt1/2.jpg" alt=""></div>
<div class="item three" data-hash="three"><img src="img/gallery/home/appt1/3.jpg" alt=""></div>
</div>
<a class="url one" href="#one"><img src="img/gallery/home/appt1/s1.jpg" /></a>
<a class="url two" href="#two"><img src="img/gallery/home/appt1/s2.jpg" /></a>
<a class="url three" href="#three"><img src="img/gallery/home/appt1/s3.jpg" /></a>
JS:
$("#owl-appt").owlCarousel(
{
items : 1,
autoplay:false,
animateOut: 'fadeOut',
loop:false,
responsive: true,
callbacks: true,
URLhashListener:true,
startPosition: '#one',
});
if($("#owl-appt .item.one").parent().is(".active")){
$("a.url.one").addClass("selected");
}else{
$("a.url.one").removeClass("selected");
};
I think if #owl-appt .item - active, you need to compare the contents of the data-hash = "#one" and a href = "#one" and if you are assigned to "selected" link. Sorry, I'm not a programmer, but only the HTML coder, but I was too interested in this question.
Related
I made a filtered gallery, it works almost as I wanted. All photos are displayed, then after clicking on a given category, only the selected group of photos is displayed. So far it's ok, but when I go back to the "all" category, I don't see any pictures. I have to refresh the page for them to appear. I suspect it has something to do with asynchrony. This is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- magnific popup js cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function () {
$(".buttons").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var filter = $(this).attr("data-filter");
if (filter == "all") {
$(".image").show(400);
} else {
$(".image")
.not("." + filter)
.hide(200);
$(".image")
.filter("." + filter)
.show(400);
}
});
$(".gallery").magnificPopup({
delegate: "a",
type: "image",
gallery: {
enabled: true,
},
});
});
</script>
This is my first website, I am a beginner. I would like to see the pictures from the class "all" without refreshing the website. What should I change in my code?
and here is the part of HTML code where the buttons are defined:
<div class="gallery" id="galeria">
<h1>Galeria</h1>
<ul class="controls">
<li class="buttons active" data-filer="all">Wszystkie</li>
<li class="buttons" data-filter="Remontowo-budowlane">
Remontowo-budowlane </li>
<li class="buttons" data-filter="Mycie">Mycie i czyszczenie</li>
<li class="buttons" data-filter="Prace_montażowe">
Prace montażowe i inne </li>
<li class="buttons" data-filter="Zabezpieczenie_przed_ptakami">
Zabezpieczenie przed ptakami </li>
</ul>
<div class="image-container">
<a href="https://i.postimg.cc/qRF05wnd/rem-bud1.jpg"
class="image Remontowo-budowlane">
<img src="https://i.postimg.cc/qRF05wnd/rem-bud1.jpg"
alt="" /> </a>
<a href="https://i.postimg.cc/DZ0n6HSg/rem-bud2.jpg"
class="image Remontowo-budowlane">
<img src="https://i.postimg.cc/DZ0n6HSg/rem-bud2.jpg"
alt="" /> </a>
<a href="https://i.postimg.cc/nhxs2VpG/rem-bud3.jpg"
class="image Remontowo-budowlane">
<img src="https://i.postimg.cc/nhxs2VpG/rem-bud3.jpg"
alt="" /> </a>
(....and so on for the whole gallery) </div> </div>
I have 3 main images being displayed. I want each image, when clicked, to popup its own individual gallery. If each gallery has 5 images, when the main image is clicked, it should show 1 of 5, etc. Currently when each main photo is clicked the gallery popup shows 1 of 15 images - so it's including all images from all 3 galleries.
<div class="row">
<div class="gallery">
<a href="img/gallery1/1.jpg" >
<img src="img/MainImage1.jpg">
<div class="caption">Gallery for image 1</div> </a>
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
<div class="gallery">
<a href="img/gallery2/1.jpg" >
<img src="img/MainImage2.jpg">
<div class="caption">Gallery for image 2</div></a>
<a href="img/gallery2/2.jpg" ></a>
<a href="img/gallery2/3.jpg" ></a>
<a href="img/gallery2/4.jpg" ></a>
<a href="img/gallery2/5.jpg" ></a>
</div>
<div class="gallery">
<a href="img/gallery3/1.jpg" >
<img src="img/MainImage3.jpg">
<div class="caption">Gallery for image 3</div></a>
<a href="img/gallery3/2.jpg" ></a>
<a href="img/gallery3/3.jpg" ></a>
<a href="img/gallery3/4.jpg" ></a>
<a href="img/gallery3/5.jpg" ></a>
</div>
My JS:
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.'
}
});
I have read this in the documentation:
Multiple galleries
To have multiple galleries on a page, you need to create a new
instance of Magnific Popup for each separate gallery. For example
<div class="gallery">
Open image 1 (gallery #1)
Open image 2 (gallery #1)
</div>
<div class="gallery">
Open image 1 (gallery #2)
Open image 2 (gallery #2)
Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.
</div>
Js:
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
But this is not clear to me. How do you differentiate the galleries? Or should it know where to pull from automatically?
Do I need to call one "popup-gallery2"? Would I then need a separate instance of the javascript to control popup-gallery2, etc?
Or is there something I'm missing? Is what I'm asking for possible using this plugin or is there a better way to accomplish this?
Thank you for reading all this - I hope it is clear what I'm asking.
Good question, it was a little tricky, as the documentation wasn't that in-depth on the multiple galleries.
It worked for me this way: Put each gallery inside the gallery-link div. Using jQuery find() method open the child gallery of the selected gallery-link. Then initialize containers for all your galleries. See code below:
HTML:
<div class="gallery-link">
<img src="http://placehold.it/200x100/54c0c7?text=Gallery-1" alt="" />
<div id="gallery1" class="gallery">
</div>
</div>
<div class="gallery-link">
<img src="http://placehold.it/200x100/fef65b?text=Gallery-2" alt="" />
<div id="gallery2" class="gallery">
</div>
</div>
JavaScript:
$('.gallery-link').on('click', function () {
$(this).find('.gallery').magnificPopup('open');
});
$('.gallery').each(function () {
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
});
Working example: https://codepen.io/pen/BRPJdw
Good luck!
Encountered same problem for my work. Here is the answer which working fine.
<div class="caption jsPop-1">
Gallery for image 1
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
<div class="caption jsPop-2">
Gallery for image 2
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
$(function(){
$('[class*="jsPop-"]').each(function(){
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled:true
}
});
});
});
Just make each gallery container is unique, then select by class and apply popup.
I'm trying to add data-title and data-lightbox and get Images alt inside.
the problem is, i have a similar outputs, from first image alt only!
How can we fix it?
jQuery(document).ready(function($) {
var imagesalt = $('.box a img').attr('alt');
$(".box a").attr("data-title", imagesalt);
$(".box a").attr("data-lightbox", imagesalt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-title="text 1" href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-lightbox="text 1" href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
I tried writing the code more than one way, but not useful
Thanks
Your query is ambiguous, that's why!
When you request the "alt" attribute with $(".box a img").attr("alt"), you're taking in many objects, sure, but attr() is returning only the first result.
In pure jQuery, you'd do it with .each():
$(".box a img").each(function(){
var imageAlt = $(this).attr("alt");
var parent = $(this).parent();
parent.attr("data-lightbox", imageAlt);
parent.attr("data-title", imageAlt);
});
That should give you the behaviour you expect.
Iterate over each of the divs with the class of 'box' - then find the image within it, get the alt text of that and apply it as the data attribute of the div. Note I put in a console.log to demonstrate the alt text is being found correctly. Ypu can use the console inspector to see that the data attribute is being applied to the divs correctly.
$(document).ready(function(){
$(".box").each(function(){
var imageAlt = $(this).find('img').attr('alt');
$(this).attr("data-title", imageAlt);
console.log(imageAlt);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
Try this:
$('.box a img').each(function(){
$(this).parent().find("a").attr("data-title", $(this).attr("alt");
$(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
})
The .attr() method gets the attribute value for only the first element in the matched set.
But, the .attr() method sets the attribute value for every element in the matched set.
enter link description here
I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();
You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
I have several divs that are inside "a href" like:
<a class="fancybox fancybox.iframe popup" href="iframe_1.html" height="35px" width="98%" >
<section class="one">
<div class="twoe over" data-direction="right" af="1">
<div class="front" >
<img src="1.jpg" width ="100%;" height ="100%;" alt="">
</div>
<div class="back" style="background-color:#99ca3c;">
<h1></h1><br/><br/><br/>
<h2>132
</h2>
<h3></h3>
</div>
</div>
</section>
</a>
<a class="fancybox fancybox.iframe popup" href="iframe_2.html" height="35px" width="98%" >
<section class="one">
<div class="twoe over" data-direction="right" af="2">
<div class="front" >
<img src="2.jpg" width ="100%;" height ="100%;" alt="">
</div>
<div class="back" style="background-color:#99ca3c;">
<h1></h1><br/><br/><br/>
<h2>222
</h2>
<h3></h3>
</div>
</div>
</section>
</a>
now I am using fancy box, so each time a div is clicked I call a frame with class popup:
$('.fancybox').fancybox();
$("a.popup").fancybox({
/*'width' : '100%',
'height' : '100%',*/
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
Now the problem is, that I need to click twice instead of once the div and do not know why, so one solution I think can solve this issue is to add an onclick event insidediv and call respective iframe, but I do not know how to do that.
Couls you please help with this issue?
Try this
$("a.popup").fancybox({
'onClosed' : function() {
location.reload(true); }
});
you need to reload the page rether than giving it as parent page like
parent.location.reload(true);
and the diff between onClosed and inCleanup is like this
"onCleanup" is the earlier call even though the popup is not closed completly,but "onClosed" is when the popup is completly closed...in detail if you click on close button of popup it first fires "onCleanup" and starts closing and after closing completely it will fire "onClosed"