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>
Related
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.
I want to know how to add information to the side of an image using lightbox.
This is some of my code as an example. The lightbox works perfectly but what I want to achieve is when I click the image the image expands and also displays information about the image to the side of it, all with in the lightbox.
<article class="style1">
<span class="image">
<img src="images/image1.jpg" alt="" />
</span>
</article>
if you're using fancybox, try to use title attribute for <a>. it should work
<img src="images/image1.jpg" alt="" title="your information">
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
I'm looking for a javascript option that will allow me to mouseover a thumbnail image to replace the "large" image. The trick here is using the anchor href from the thumbnail link as the large image source. I need this to work for multiple instances.
The <img src="large1.jpg"> etc. can be removed if that helps
Below is a simplified version of the HTML code I am using. This code cannot be changed.
Every id and class can be unique.
<div class="image-1">
<img src="large1.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
...
<div class="image-2">
<img src="large2.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...
check this solution
http://jsfiddle.net/dtdaynjp/
add to all "large" image unique class, image-1, image-2, image-3..
for each thumbs link add class similar like appropriate large image: thumb-image-1, thumb-image-2, thumb-image-1...
add this jQuery code:
$(function() {
$(".mouseover a").mouseover(function(){
var src=$(this).attr('href');
var classs=$(this).attr('class');
classs=classs.substr(6);
$('.'+classs).find('img').attr('src',src);
})
})
I would just use the CSS :hover selector. Then you can add animations and other cool things to your images.
EXAMPLE HERE.
I have this for changing the background image of div.fullscreen:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390- linux/hercules-s390/ssh-dasd1.png';"
width="72" height="54" alt="Item ksc1" />
</a>
</div>
However, is there a way to change the background image of a table on hover of another image link?
Sure, look at an example here.
This is done by giving the img an id and the table an id. Then we listen for when the mouse is over the img and when it does, change the background-image of the table.
Only want to use inline JavaScript? Use this:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover='document.getElementById("table_id_here").style["background-image"]="url(\'http://www.gravatar.com/avatar/\');'
width="72" height="54" alt="Item ksc1" />
</a>
</div>