How to show/hide big image by clicking on thumbnails?
See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<a href="http://lorempixel.com/400/200/sports/1/"><img src="http://lorempixel.com/100/50/sports/1/"></a>
<a href="http://lorempixel.com/400/200/fashion/1/" class=""><img src="http://lorempixel.com/100/50/fashion/1/"></a>
<a href="http://lorempixel.com/400/200/city/1/"><img src="http://lorempixel.com/100/50/city/1/"></a>
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/
Show a large-size image when click on thumbnail and giving opacity
Use ng-click to set a scope variable like selectedImage which can be used in ng-class and ng-src for big image
// small image
<img ng-src="{{img1}}"
alt="{{img1_alt}}"
title="{{img1_title}}"
ng-click="selectImage(img1)"
ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}"
>
// big image
<img ng-if="selectedImage" ng-src="selectedImage ">
In controller:
$scope.selectedImage = null;
$scope.selectImage=function(img){
$scope.selectedImage = img;
}
please help me simplify: show/hide thumbnails and large images
There are lots of ways to tackle this. The first and most obvious that comes to my mind is simply to pass a number into a single function which determines the image id to modify:
function get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
... And the same thing for get_big().
Alternatively you can use just one function that handles both conditions (big or thumbnail):
function get_img(id, type) {
if (type == 'big') {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large' + id).style.visibility='visible';
}
else if (type == 'thumb') {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
else return false;
}
And in the HTML:
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div>
...etc
</div>
jQuery simple show/hide large image from thumbnail click
I Like jQuery Tools. Granted, it's another library, but well worth it! I include this library in MOST of my web projects.
Just pop this line into your HEAD tag, and it also includes the jQuery Lib.
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
Once that's done, just use the Overlay library. I use this to pop-up images, forms, or anything else.
Essentially, you just create a div:
<div id="image1" class="modalBox">
<h2>Title</h2>
content
</div>
Style it:
.modalBox {
background-color:#fff;
display:none;
width:350px;
padding:15px;
text-align:left;
border:2px solid #600;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
position:fixed;
_position:absolute;
}
.modalBox h2 {
background:url(images/logoac.png) no-repeat;
margin:0px;
padding:10px 0 10px 110px;
border-bottom:1px solid #333;
font-size:20px;
color:#600;
font-family:calibri, hevetica, tahoma, arial;
text-align:right;
}
Create a JS function to popup divs
var api;
function showDiv(v){
if (api) //close any pop-ups that might already be open
if (api.isOpened)
api.close();
if (!document.getElementById(v)) return;
api=$('#'+v).overlay({
mask: {color: '#000000'},
top:'0px',
api: true
}).load();
}
Then When you click a "link" just call:
showDiv('image1'); //change image1 to the name of the div with your content
There are even a handful of nice animations and effect to go along with the library (like the Apple Effect and the Drop Effect
Highly customizable and highly useful!
Javascript: Clicking thumbnails to switch a larger image. Best method?
You should be able to switch images as many times as you wish.
The piece of code you reference replaces the image source of #target, with the href of a link within a #thumbs div. It should work fine.
<img id="target" src="images/main.jpg">
<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>
Now as far as width and height, I am pretty sure there are some cross-browser compatibility issues with how browsers handle a defined width, but an undefined height, when you swap out the images.
In firefox, the following works. Plain old javascript, no jquery:
<html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<img id="main" src="images/main.jpg" width="50">
<a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>
</body>
</html>
Simple javascript gallery, show big image on click of each small thumbnail image
I would use classes instead of ids but it works both ways. you could replace class from the selector with id. See how it works without using the number in the selector. Then you can just iterate over all the "images" and add them the click event handler
let imagePlaceholder = document.querySelector('#defaultImage');
let images = document.querySelectorAll('[class^="onClickImage"]');
images.forEach( image => {
image.addEventListener('click', () => {
imagePlaceholder.src = image.src;
});
});#defaultImage {
display: block;
margin: 0 0 5px 0;
}
[class^="onClickImage"] {
height: 20px;
cursor: pointer;
}<img id="defaultImage" src="https://dummyimage.com/400x150/000/fff.jpg&text=default" />
<img class="onClickImage0" src="https://dummyimage.com/400x150/000/fff.jpg&text=default" />
<img class="onClickImage1" src="https://dummyimage.com/400x150/000/fff.jpg&text=1" />
<img class="onClickImage2" src="https://dummyimage.com/400x150/000/fff.jpg&text=2" />
<img class="onClickImage3" src="https://dummyimage.com/400x150/000/fff.jpg&text=3" />
<img class="onClickImage4" src="https://dummyimage.com/400x150/000/fff.jpg&text=4" />
<img class="onClickImage5" src="https://dummyimage.com/400x150/000/fff.jpg&text=5" />
<img class="onClickImage6" src="https://dummyimage.com/400x150/000/fff.jpg&text=6" />
<img class="onClickImage7" src="https://dummyimage.com/400x150/000/fff.jpg&text=7" />Show and hide image when clicked
You can try something like this:
Logic:
- On click, check if thumbnail to be shown is visible/
- If yes, hide it.
- If not, then hide any other thumbnail and show current thumbnail.
$('.theme-preview').click(function() {
var previewPopup = $(this).children('.popup-preview');
if (previewPopup.is(":visible"))
previewPopup.fadeOut("slow");
else {
$('.popup-preview:visible').fadeOut();
previewPopup.fadeIn("slow");
previewPopup
.css({
"position": "fixed",
"top": ($(window).height() / 2) - (previewPopup.outerHeight() / 2),
"left": ($(window).width() / 2) - (previewPopup.outerWidth() / 2)
})
}
return false;
});
$('html').click(function() {
$('.popup-preview').hide();
return false;
});
$('.popup-preview').on("click", function(e){
e.stopPropagation()
}).popup-preview {
background: black;
position: absolute;
z-index: 1;
display: none;
}
.col-md-6 {
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
</div>How to show a picture after clicking the thumbnail using Javascript not jQuery?
The vanilla-js version will not be so different from the jQuery version. If you add a click listener with addEventListener, the clicked element will be available as this:
var large = document.getElementById('gallery').firstChild;
// another option:
// var large = document.querySelector('#gallery img');
var thumbs = document.getElementsByClassName('thumbs');
// another option:
// var thumbs = document.querySelectorAll('.thumbs');
for(var i=0; i<thumbs.length; i++) {
thumbs[i].addEventListener('click', function(e){
large.src = this.getElementsByTagName('img')[0].src;
}, false);
}
You can use a single event handler on your <ol>, instead of one per <li>. This example assumes a thumbs-container class on the <ol>:
var container = document.querySelector('.thumbs-container');
container.addEventListener('click', function(e){
large.src = e.target.src;
}, false);
Be aware that my code examples need a few tweaks to work cross-browser, particularly for IE<=8.
Related Topics
How Much of an Effect Can Different Operating Systems Have on Displaying Web Pages
Jquery.Lazy(): Plugin Is Not Loading My 'Li' Contents
Ios: Disable Bounce Scroll But Allow Normal Scrolling
Trigger Same CSS Animation on Every Click
Get CSS Not-Computed Property-Value with JavaScript Only
Stop Infinite CSS3 Animation and Smoothly Revert to Initial State
Create New Row Every 2 Records Using Knockout Foreach
List of All Background Images in Dom
Change the Fixed Navbar's Classes Depending on the Background of the Page Section It Hovers
Change Text Selection Highlight with Js
JavaScript -Change CSS Color for 5 Seconds
Detect Support for Background-Attachment: Fixed
How to Dynamically Change the Style Tag Using JavaScript
Click Event Doesnt Work in Safari Mobile for Some HTML Content
How to Use Feature Detection to Know If Browser Supports Border-Radius? (Including IE9)