How would I go about changing a group of images to their correct places based on the correct button that was pressed at the time. I've found examples of a single button with multiple images, but cannot figure out how to use multiple buttons that place various images in a set location.
For example, I have three buttons that each are suppose to display three different images when they are clicked, taking the place of the whichever button was displayed earlier.
HTML:
<div class="container">
<div class="row center-block" style="margin:20px auto;">
<div class="col-md-2 center-block text-center">
<button id="btnBasketball" class="btn btn-primary" onclick="basketballImg()">Basketball</button>
</div>
<div class="col-md-2 center-block text-center">
<button id="btnFootball" class="btn btn-primary" onclick="footballImg()">Football</button>
</div>
<div class="col-md-2 center-block text-center">
<button id="btnHockey" class="btn btn-primary" onclick="hockeyImg()">Hockey</button>
</div>
</div>
</div>
<div class="col-md-4">
<center>
<img id="img1" src="" class="img-rounded" alt="">
<input type="button" onclick="pic1()"/>
</center>
</div>
<div class="col-md-4">
<center>
<img id="img2" src="" class="img-rounded" alt="">
<input type="button" onclick="pic2()"/>
</center>
</div>
<div class="col-md-4">
<center>
<img id="img3" src="" class="img-rounded" alt="">
<input type="button" onclick="pic3()"/>
</center>
</div>
JAVASCRIPT:
<script>
function basketballImg(){
picLocation1('img/bbImage1.png');
picLocation2('img/bbImage2.png');
picLocation3('img/bbImage3.png');
}
function footballImg(){
picLocation1('img/fbImage1.png');
picLocation2('img/fbImage2.png');
picLocation3('img/fbImage3.png');
}
function hockeyImg(){
picLocation1('img/hyImage1.png');
picLocation2('img/hyImage2.png');
picLocation3('img/hyImage3.png');
}
</script>
Is a script like this the best way to go about getting the group of images selected? I'm open to any suggestions! Thanks in advance!
If i understand right ,you are trying to change the images to a new set of images based on the button click then .
This is the simplest way I could think of though this is not the most efficient way but this should work
function basketballImg(){
document.getElementById('img1').href = 'img/bbImage1.png';
document.getElementById('img2').href = 'img/bbImage2.png';
document.getElementById('img3').href = 'img/bbImage3.png';
}
function footballImg(){
document.getElementById('img1').href = 'img/fbImage1.png';
document.getElementById('img2').href = 'img/fbImage2.png';
document.getElementById('img3').href = 'img/fbImage3.png';
}
function hockeyImg(){
document.getElementById('img1').href = 'img/hyImage1.png';
document.getElementById('img2').href = 'img/hyImage2.png';
document.getElementById('img3').href = 'img/hyImage3.png';
}
now on click of each button these set of images will be replaced by the ones that are there .
Related
I am using jquery cropper to achieve something like this below. Whenever the user clicks on an input that image will be sent to cropper canvas. And once the user saves the cropped image it will be loaded into the preview box and clear the cropper canvas.
This is what I am trying to achieve
But the problem with this is, this works great for the first input file. But when I try to do the same with next input it through
Uncaught TypeError: Cannot read property 'toDataURL' of null
I could not figure out why this is happening when it works great for the first time.
My code is here below.
$(document).ready(function() {
$('Input[type="file"]').on('change', function(event) {
var parent = $(this).closest('div');
parent.addClass('isSelected');
cropImage(URL.createObjectURL(event.target.files[0]), parent);
})
})
function cropImage(blob, domElement) {
var output = document.getElementById('change-profile-pic');
output.src = blob;
$('#change-profile-pic').cropper('destroy');
var $croppedImage = $('#change-profile-pic')
var result;
result = $croppedImage.cropper({
ready: function() {
console.log('Cropper initialized');
},
aspectRatio: 1 / 1,
crop: function(e) {}
})
$('#save').click(function(action) {
domElement.find('img').attr('src', $croppedImage.cropper('getCroppedCanvas').toDataURL());
domElement.removeClass('isSelected');
result.cropper('destroy');
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row mt-5">
<div class="col-6">
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
</div>
<div class="col-6">
<div class="crop-image-section">
<img src="" id="change-profile-pic">
</div>
<button type="button" id="save" class="btn btn-primary">Save</button>
</div>
</div>
I added code to the jsFiddle here
Can anyone please tell me where I m doing wrong. Thanks
there, please put your scripts to the bottom of the document in order to render the canvas first.
So this does mean you should move the scripts.
<div class="row mt-5">
<div class="col-6">
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
<div class="image-wraper">
<input type="file" name="image">
<div class="image-preview">
<img src="" class="img-fluid">
</div>
</div>
</div>
<div class="col-6">
<div class="crop-image-section">
<img src="" id="change-profile-pic">
</div>
<button type="button" id="save" class="btn btn-primary">Save</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here's my modified version.
I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/
Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
Lets say I have these divs that are products and
<div class="container">
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
</div>
There are only 2 products due to 'stackoverflow restriction of mostly-code'. Lets say there are 10 of these products and I want to display 5 of them and rest would be shown one by one as per click on forward and backward buttons just like facebook have when viewing photos.
You can set your class='container div to a specific height. If your items' height is, let say, 200px you can set your container to 400px. Then on button click you can scroll container div. Your code will look like this:
<script>
function scrollOneItem(){
var container = document.getElementByClassName('container');
container.scrollTop = container.scrollHeight + 200;
}
</script>
<button onClick="scrollOneItem()">Scroll down</button>
<div class="container">
...
</div>
I am using bootstrap and make one row with 2 column and one button , I want to do when i click on the button will show 4 column instead of 2 column.
JQuery
$('#more_service').on('click',function(){
$('.service_container').slideToggle('slow',function(){
var template = $('item_template').html();
$('.service_wrapper').html(template);
});
});
html
Creative Service
<div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div> <div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div>
</div> </script>
$('item_template').html(); is an element in your code like a class or an ID? If so, you need to add a dot or a hashtag like:
$('item_template').html();
becomes
$('#item_template').html(); or $('.item_template').html();
if item_template is id use # if it is class use . and use innerHTML:
var template = $('#item_template').innerHTML;