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.
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>
Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.
Magnific popup is working, but not the way I want it to.
Here is Plnkr.
Why is it not working? Here is the jQuery code:
$('.view').click(function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
Why don't you change your html to :
<div class="pic">
<a class="image-popup-fit-width" href="http://farm4.staticflickr.cm/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
<img src="pictureLink" width="75" height="75">
</a>
<p>Click to view</p>
</div>
The anchor tag needs to have image-popup-fit-width class rather image-popup.
<a class="image-popup-fit-width" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="75" height="75">
</a>
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.
Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet