Click to zoom a picture - javascript

I'm using thumbnail from bootstrap and I want to make that when I click on that thumbnail to appear the picture with original sizes and when I click somewhere that picture with original sizes to disappear.
I hope you can understand me what I'm trying to explain..
This is an example of my thumbnail code
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>

Maybe you can try the CSS:onfocus.
a.thumbnail:focus > img.small {
visibility: hidden;
}
a.thumbnail:focus > img.large{
visibility: visible;
}
Html:
<a href="#" class="thumbnail" tabindex="0">
<img class="small" src="..." alt="..."></img>
<img class="large" src="..." alt="..."></img>
</a>
Note that tabindex="0" is necessary here to make <a> focusable.

What you want here is a modal plugin. Bootstrap has one, but it is not suitable for this kind of use.
You can find one implementation and examples of how to use it here: http://fancyapps.com/fancybox/
This may be overkill for your solution, but there are many alternatives to it.

Related

How to trigger a function on all images with a class when done loading in JQuery 3.X?

I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>

make a image appear and disappear

i am trying to create a responsive image that when to click on it another image opens and when you click on the new picture it goes away... disappears.
thanks !!
this is my code:
<div class="item">
<div id="img1"><"https://www.istockphoto.com/il/photos/lion-cub?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=lion%20cub" /></div>
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick=diffImage(this) />
<img src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.display='none';"/>
</div>
The below code works in a similar approach to yours.
I have used the visibility CSS property instead of display and added the correct javascript into the onclick event of the first image
<div class="item">
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick="document.getElementById('other-image').style.visibility='visible'" />
<img id="other-image" src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.visibility='hidden';"/>
</div>
I would recommend looking in to javascript in more detail to be able to do this in a more reproducible way.

CSS translate3d performance problems on mobile devices with big DOM

I'm using OwlCarousel 1.3.3 on a website pretty much like the sync example from the owl website (http://owlgraphic.com/owlcarousel/demos/one.html):
var owlconfig = {
singleItem: true,
navigation: false,
pagination: false,
afterAction: syncCarousels
};
$('.image-gallery').owlCarousel(owlconfig);
The syncCarousels doesn't have any magic in it and it doesn't cause the lag, because it's still happening when I take that method out.
The HTML of the carousel (after initialising the JS):
<div class="image-gallery owl-carousel owl-theme">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
<div class="owl-item" style="width: 300px;">
<a href="images/image.jpg" class="image-gallery__image">
<img src="images/image.jpg" alt="Image" itemprop="image">
<span class="button">
<span class="btn__inner">Detail</span>
</span>
</a>
</div>
</div>
</div>
In the desktop version, everything works fine, but if I test it on an iPhone or iPad, the swipe feels extremely laggy. On DragEnd, it stops for like 500ms, before anything happens.
The page where the carousel is embedded has a lot of difference html markup, text and images basically. If I remove some of that markup, the owlCarousel performance improves, but thats not a solution.
How could the performance be improved? Event the "noSupport3d" option of owl which uses jQuery animate performs better.
Okay, I figured it out, here's the solution for everyone stumbling upon a similar problem:
A big amount of DOM elements affect the performance of transitions, that's why the slider worked perfectly in a lightweight html page but had performance issues in a bigger page.
What I did now to increase performance of my slider was adding transform: translateZ(0px) to the parent element of the one being translated.
Attention: Using translate3D does not make this code redundant. I'm now using translate3D for the sliding effect AND translateZ(0px) for the parent container of the sliding one - this did the trick.

Display manually defined gallery from thumbnail click (fancybox)

I am using a theme for Wordpress that has fancybox already included in it. Everything works fine, smooth and clean, the way it's supposed to.
Now there is something I'd like to do, and unfortunately I don't have the knowledge for it:
When clicking on the 1st thumbnail of my publicated post, a fancybox slideshow appears and displays all the thumbnails. Cool enough, but I'd like this slideshow to display more than just those thumbnails.. Something like 10 or 20 files maybe, hosted locally.
I believe there's a way to do this, I found this code fragment on another question ( Fancy box - how to show slideshow from a single thumbnail ) but just couldn't make it work, no matter how hard I tried (I can more or less "read" codes, but writing it is not yet something I can do!)
So yeah, to put things simply, I'd like my "post1" fancybox to display X pictures, other than the thumbnails. And also, be able to repeat this trick with X different posts, so I need to find a clean way to do it, not just some structure trick. I tried to include the above code in the html part of my post, but just didn't work.
Feel free to answer! And let me know if you need more info!
I believe this is the interesting part of my HTML's post:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
<div id="product-thumbs">
<a href="#" class="active" rel="1">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
<a href="#" class="last" rel="2">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
</div> <!-- #product-thumbs -->
</div> <!-- #product-slider -->
After reading several questions, external links and more, this is how I figured out my issue, and how I believe it works: (Sorry if it sounds quite basic, but I'm just gonna explain it the way I would have liked to read it! Newbie language: ON)
Since fancybox is already activated by my WP theme, there is no need for me to call it in my HTML code on my post. When checking my source code on my post (with 1 thumbnail and no code added), I see this code generated:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
Therefore my "rel" value for the slideshow is "gallery". Now, I just need to add as many files as I wish in my post for the slideshow to display them, with the following code:
<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>
And that's it, I can add as many pictures as I wish, whilst none of them are displayed as thumbnails! Anyway, thanks to Toni and Janis for their help, if this answer doesn't help anyone else, at least I'm happy to have this working the way I wanted!

Centering a Floating div

I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.
try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/
I am not sure the content of your 'im-center', since I add an inline style(text-align:center;) as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>​​​
Try to apply margin: 0 auto; CSS rule to the div.

Categories