We Keep Coding

Magnific popup galleries - isolate from each other

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.

Setting Bxslider to load different images?

Hello everyone and thank you for your time.
I made a Menu with 2 images.
I want Bxslider to change and show different images each time someone clicks 1 of the 2 "Menu images"
So the idea i had is to hide 1 of the 2 bxsliders and swap when i click menu any ideas how i can do that?
Here is what i managed to make so far
Here is the 2 images menu:
<div class="Menu1">
<div class="Menu1_1"> <a href="a"class="reload-slider1" ><img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4" ></a>
</div>
<div class="Menu1_1" >
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>
Here are the scripts for the Bxslider:
<---BxSlider----->
<script>
var slider = $('.bxslider1').bxSlider({
mode: 'horizontal'
});
$(document).ready(function(){
$('.bxslider2').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
$(document).ready(function(){
$('.bxslider3').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
<script>
$('.reload-slider1').click(function(e){
e.preventDefault();
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
$('.reload-slider2').click(function(e){
e.preventDefault();
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_1.jpg"></li>');
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_2.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
</script>

Your HTML appears invalid:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4 ; reload-slider">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5 ; reload-slider2">
</div>
It contains invalid ID, and probably that is why document.getElementById() is not working for you. Change the id of the img tags:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>

Showing and hiding image after clicking event

I'm trying to hide language_arrow_bottom after clicking and show language_arrow_up and afterwards the other way around.
I cannot find the error in my code below? I know toggle in jquery but I don't want to use it for now.
Thanks in advance
I'm loading http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
HTML
<a id="language_arrow_bottom" href="#nogo" title="Other languages‎"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close‎" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
JS
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});

You need to hide the language_arrow_up element by default, not the image inside it
<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
Demo: Fiddle

I don't know but I think you probably need to add return false; calls at the end of your functions. Other code looks good

Check this Fiddle
Just make a with the id and do the same procedure you tried with the tag
<div id="language_arrow_bottom">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
</div>
<div id="language_arrow_up" style="display:none;">
<img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/>
</div>

Agree with Arun above.
Also, this code may be working, but you are using the same image, "web/images/bottom_arrow.jpg", so visually it may look like it's not working. Try using separate content within the tag (or view the web inspector) to validate whether the code is working or not.

Another fiddle:
http://jsfiddle.net/8A8LS/1/
<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>
$('a').click(function () {
$('a img').show();
$(this).find('img').hide();
});

Change the code to set display "None" for "a" instead of the img as the image is inside the a tag and you are showing and hiding based on the "a" id.
<a id="language_arrow_bottom" href="#nogo" title="Other languages">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
The same js code will work here after the above changes.
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});

This is because you have hide the image on load...you should use display none in 'a' tag not in 'img'

onclick event instead of clicking <a href /> in jquery and fancy box to open iframe

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"

Prevent jquery slider's image show in the page on click

i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.

You should do
$('#foo a').click(function(e){
e.preventDefault();
});

Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...