Develop Reference

Magnific-Popup Gallery with two image tag in a single a tag

I'm making a gallery with Magnific-Popup but for speed up my website i've inside the a tag two different image. One for big screen and another one for small screen. I'm hidding one or the other one image with bootstrap class (hidden-lg hidden-md & hidden-sm hidden-xs).
The problem is that when i click on the a tag to open the image gallery, Magnific-Popup try to open hidden image and return "the image could not be loaded".
<li>
<figure>
<div class="gallery-item">
<a href="assets/upload/images/romantic/clem-onojeghuo-193397.jpg" title="" class="gallery-item">
<img src="/assets/image-cache/romantic/clem-onojeghuo-193397.5ddf5942.jpg" alt="" class="hidden-lg hidden-md">
<img src="/assets/image-cache/romantic/clem-onojeghuo-193397.36620614.jpg" alt="" class="hidden-sm hidden-xs">
<div class="gallery-caption">
<div class="centrize">
<div class="v-center"><i class="hc-search"></i></div>
</div>
</div>
</a>
</div>
</figure>
</li>
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});

It was my own error because i've two time the "gallery-item" class. One on the div tag and the other on the a tag.

How to open a new page with the same image showing as you clicked on using jquery

I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice on this
I have this :
<div class="col-md-4">
<img src="">
<img src="">
<img src="">
</div>
When Clicked on img it's redirected to the stuffedd.html page. However this contains 2 columns with images. A vertical thumbnail column and a middle column with large image.
Like this:
<div class="middle containerscroll">
<img src="" id="Mdrie" class="img-responsive ">
<img src="" id="Mvier" class="img-responsive ">
<img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
<img src="" id="drie" class="img-responsive single">
<img src="" id="vier" class="img-responsive single">
<img src="" id="vijf" class="img-responsive single">
</div>
I got this far with Jquery :
$(document).ready(function(){
"use strict";
$( ".single" ).hide();
$( "#Mdrie" ).on('click',function() {
$('#drie').toggle();
$(".single").not('#drie').hide();
});
How do I make the stuffedd.html open with the image I clicked on in the second div (all the images with class .single)
Do I declare a variable which I fill in as:
$( "var" ).show();
website is: www.damondebacker.com if you need to see it.

If I understand the question, the second page needs to be aware of what you clicked on the previous page, consider adding some identifier into the URL that identifies the image:
<img src="">
Then the second page has a spot to extract it from. If you don't want it in the URL you could set a cookie or use the LocalStorage object.

Try to transfer the ID of the picture on the first page with your URL. So you click on the Image and the link is something like /stuffed.html?id=drie. Later on your stuffed site, you get the parameter with jquery in a variable and show exactly this image. Here is a short tutorial for URL Parameters and jQuery

Show GIF images in 9Gag style

I like to know how to show a GiF file after clicking a JPG file just like in 9Gag.com
I'm using timthumb.php for JPG image.
https://code.google.com/p/timthumb/
Here is the code below
<div class="images">
<img alt="Image Title" src="timthumb.php?src=MyImage.jpg&w=500&q=100">
</div>
I want to show the original image after clicking this JPG. Can anyone point me out the way to do this using jQuery or JavaScripts.
Note: This is a image loop so there can be more then one image.
Really appropriate your help.

This can be done with the jQuery library.
HTML
<div class="images">
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
</div>
Javascript
$(".thumb").click( function(){
$(this).attr("src", $(this).attr("gif"));
});
http://jsfiddle.net/PP42Q/8/

Fancybox showing the same image

I'm having trouble using Fancybox on my website.
These are two (out of 9) of my divs, with different images in it. The thing is, whenever I click on any of the images, it shows the same image everytime. So when I click on the 2nd image, it shows the first image, just like all of the other divs.
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div></a>
</a>
<a id="single_3" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div></a>

You need to make ids unique. Also having 2 closing </a> tags for the first block probably isn't good for you.
Try:
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div>
</a>
<a id="single_4" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div>
</a>

Show next and previous image in Twitter Bootstrap Carousel

I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers

This is the link that helped me
Twitter Bootstrap 101: The Carousel