I am trying to change the big image when another small image is clicked, kind of like a product display on an e-commerce website. But my code doesn't seem to work.
jQuery(document).ready(function($) {
$('.blue-button').on({
'click': function() {
$('#change-image').attr('src', 'https://cdn.shopify.com/s/files/1/0781/4423/files/02_8df18841-8d84-4a96-9611-e5a965dce73c.jpg?v=1568864598');
}
});
$('.yellow-button').on({
'click': function() {
$('#change-image').attr('src', 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/mothers-day-flower-bouquet-1588610191.jpg');
}
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container">
<img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" class="blue-button box">
<img src="https://i.pinimg.com/originals/16/cd/d9/16cdd95fab4a41e8cbe3e1f724343f49.png" class="yellow-button box">
</div>
<img id="change-image" src="https://img.freepik.com/free-vector/beautiful-watercolour-bouquet-flowers_52683-45189.jpg?size=626&ext=jpg" />
Don't repeat JavsScript code. Instead delegate a click to every .button-container's img element:
jQuery(function($) {
const $image = $("#change-image");
$(".button-container").on("click", "img", function() {
$image.attr("src", this.src);
});
});
.button-container img {max-height: 60px;}
<div class="button-container">
<img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" class="blue-button box">
<img src="https://i.pinimg.com/originals/16/cd/d9/16cdd95fab4a41e8cbe3e1f724343f49.png" class="yellow-button box">
</div>
<img id="change-image" src="https://img.freepik.com/free-vector/beautiful-watercolour-bouquet-flowers_52683-45189.jpg?size=626&ext=jpg"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Another suggestion is not to load the fullsize images if you need thumbnails.
Store the Full-size image inside the data-* attribute of the thumbnail image:
jQuery(function($) {
const $image = $("#change-image");
$(".button-container").on("click", "img", function() {
$image.attr("src", this.dataset.src);
});
});
.button-container img {max-height: 60px;}
<div class="button-container">
<img src="https://placehold.it/50x50/0bf" data-src="https://placehold.it/250x150/0bf">
<img src="https://placehold.it/50x50/f0b" data-src="https://placehold.it/250x150/f0b">
</div>
<img id="change-image" src="https://placehold.it/250x150/0bf"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Related
When you click on the button and on the picture, there should be a shift to the left by 100 pixels, but this does not happen why?
I try to move some elements using Jquery, but it doesn't work.
$(document).ready(function() {
$(".left").click(function() {
let paragraphs = $("p");
$(paragraphs[2]).animate({
left: '100px'
});
})
let images = $("img");
$(images[1]).click(function() {
$(images[1]).animate({
left: "100 px"
});
})
})
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="mega-div">
<p>text1</p>
<img src="images indv4/1images.png">
<p>text2</p>
<img src="images indv4/2images.png">
<p>text3</p>
<img src="images indv4/3images.png">
<p>text4</p>
<img src="images indv4/4images.png">
<p>text5</p>
</div>
<button class="left">Сместить параграфы</button>
</body>
The image should have a position property with relative. Otherwise it left doesn't affect the element. And make sure you type your left values without spaces; 100 px won't work, but 100px will.
$(document).ready(function() {
$(".left").click(function() {
let paragraphs = $("p");
$(paragraphs[2]).animate({
left: '100px'
});
})
let images = $("img");
$(images[1]).click(function() {
$(images[1]).animate({
left: "100px"
});
})
})
img {
position: relative;
}
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="mega-div">
<p>text1</p>
<img src="images indv4/1images.png">
<p>text2</p>
<img src="images indv4/2images.png">
<p>text3</p>
<img src="images indv4/3images.png">
<p>text4</p>
<img src="images indv4/4images.png">
<p>text5</p>
</div>
<button class="left">Сместить параграфы</button>
</body>
I'm trying to implement a function like Google Image Search, which is that when you click a picture, a subpage appears in the screen below the picture. And it takes a whole line. The screenshot is showing below.
http://www.wy19900814fun.com/thumbnails/test.png
Here's my code. Is there anyone helping me to implement or at least give me some advise? I'm trying to do a function like when you click a picture, the second div class shows below the picture you click. It needs to take a whole line.
<html>
<head>
<style>
.container {
text-align: center;
}
.container img {
display:inline-block;
}
.subpage {
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class="subpage">
<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
</div>
</body>
</html>
$('img').click(function() {
var $img = $(this),
offset = $img.offset(),
subPage = $('#subPage').hide().insertAfter('.container'),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});
.container {
text-align: center;
}
.container img {
display:inline-block;
width:32%;
vertical-align:top;
}
#subPage {
background:#222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div id="subPage"></div>
You could do like that :
JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
var subpage = $('.subpage');
subpage.hide().empty().fadeIn(250);
$('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250);
});
});
Jsfiddle
I have this layout in HTML:
<div id="front">
<img id="student_front" src="' . $path . '/images/student_front.jpg"></img>
<img id="myid_info_photo"></img>
<div id="myid_info_college">CEIT</div>
<div id="myid_info_idnumber">101-03043</div>
<img id="myid_info_signature"></img>
<div id="myid_info_course">BSCS</div>
<div id="myid_info_name">Alyssa E. Gono</div>
<div id="myid_info_barcode"></div>
</div>
I want to generate a Jpeg file of what div#front will appear in my screen. How will I do that in Javascript? I have a button that will invoke an action when it is click.
function myid_print_id() {
win = window.open(document.getElementById("student_front").src,"_blank");
win.onload = function() {
win.print();
}
}
$('#myid_print_id').on('click', function(e) {
e.preventDefault();
myid_print_id();
});
myid_print_id() function just retrieves the image file. I wanted to retrieve the appearance of my whole div with an id "front".
Load the html2canvas js file, then add this:
$('#btn').click(function() {
html2canvas($('#front'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#output').append(canvas);
}
});
});
#output {
border: 1px solid #888888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="front">
<img id="student_front" src="http://lorempixel.com/400/200">
<div id="myid_info_college">CEIT</div>
<div id="myid_info_idnumber">101-03043</div>
<div id="myid_info_course">BSCS</div>
<div id="myid_info_name">Alyssa E. Gono</div>
<div id="myid_info_barcode">More text</div>
</div>
<button id="btn">CLICK FOR PIC</button>
<br>
<div id="output"></div>
You will need to change the image URL to something on the same domain (html2canvas does not load cross domain images).
Html
<div>
<input type="button" id="btnGenerateImage" value="Generate Image" />
</div>
<div>
<canvas id="myCanvas"></canvas>
</div>
<div>
<h1>
Generated Content</h1>
<img id="canvasImg" alt="Right click to save me!">
</div>
SCRIPT
$("#btnGenerateImage").on('click', function () {
var canvas = document.getElementById('myCanvas');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
});
I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.
<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
Here's a simple JavaScript which solves this kind of problem:
<script>
var next = document.getElementById('next'),
back = document.getElementById('back'),
questions = document.getElementsByTagName('div'),
current = 0;
next.onclick = function showNext() {
if (questions[current+1]) {
questions[current].style.display = 'none';
questions[current+1].style.display = 'block';
current++;
} else {
return false;
}
}
back.onclick = function showPrev() {
if (questions[current-1]) {
questions[current].style.display = 'none';
questions[current-1].style.display = 'block';
current--;
} else {
return false;
}
}
</script>
And at first you should hide the questions with CSS (except the first one):
<style>
div:not(:first-of-type) {
display: none;
}
</style>
EDIT: here is your HTML...
<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :
<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
With JQuery:
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current question
$('.question:eq(' + newQuestion +')').show(); // show new question
actual = newQuestion; // memorize actual selection
}
You can achieve this by combining HTML, CSS and jQuery.
In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.
HTML Code
<input type="button" value="Next" id="next_qs">
<input type="button" value="Back" id="prev_qs">
<div class="question_one">
QS1
</div>
<div class="question_two">
QS2
</div>
<div class="question_three">
QS3
</div>
<div class="question_four">
QS4
</div>
CSS Code
div {
width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}
div.active {
display: block;
}
jQuery Code
$("div:first").addClass('active')
$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});
$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});
http://jsfiddle.net/27gwy14f/
HTML
<div id="container">
<input type="image" src="back.gif" alt="Back">
<input type="image" src="forward.gif" alt="Next">
<div class="question_one question active">
1
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two question">
2
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three question ">
3
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four question">
4
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
</div>
Jquery
<script>
var $container = $("#container") // caches the jquery object
$container.find('input[alt="Next"]').on("click",function(){
var active = $container.find(".active")
if(active.next(".question").length === 0){
return false
}else{
active.removeClass("active")
active.next(".question").addClass("active")
}
})
$container.find('input[alt="Back"]').on("click",function(){
var active = $container.find(".active")
if(active.prev(".question").length === 0){
return false
}else{
active.removeClass("active")
active.prev(".question").addClass("active")
}
})
</script>
CSS
<style>
#container .question{
display:none
}
#container .active{
display:inline-block;
}
</style>
JS FIDDLE
http://jsfiddle.net/vrnxL9n8/
edit: added js fiddle link
I have the following code which displays an image onmouseover and sets back the default image active onmouseout.
<img src="image1.jpg" onmouseover="this.src='image2.jp'" onmouseout="this.src='image1.jpg'" />
I want to be able to display multiple images onmouseover event; each displaying after a set time. Can anyone help me out on this?
HTML
<div id="container">
<img id="initialIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" />
</div>
<img src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png'" />
JavaScript
$(document).ready(function(){
$("#container").mouseenter(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
$("#initialIMG").fadeIn(50);
$("#container").append( '<img id="addedIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/mixmaster-icon.png" style="display:none;"/>' );
$("#addedIMG").fadeIn(50);
},500);
});
$("#container").mouseleave(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
$("#initialIMG").fadeIn(50);
$("#addedIMG").remove();
},500);
});
});
FIDDLE
Try this:
function showImage() {
//Your code here
}
function hideImage() {
//Your code here
}
<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />
Is there any specific reason you don't want to use jQuery?
in css:
#my-pics .default{
display: inline;
}
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg" style="display:none;" />
<img src="image3.jpg" style="display:none;" />
</div>
in js:
$("#my-pics").mouseenter(function(){
$(this).find(".default").hide();
$(this).find(":not(.default)").show();
}).mouseleave(function(){
$(this).find(".default").show();
$(this).find(":not(.default)").hide();
});
Of course you need to import jquery first. Haven't tested this myself, any errors?
CSS solution?
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg"/>
<img src="image3.jpg"/>
</div>
in css:
#my-pics img{
display: none;
}
#my-pics img.default{
display: inline;
}
#my-pics:hover img{
display: inline;
}
#my-pics:hover img.default{
display: none;
}
A quick solution, maybe not the most beautiful one, but it works.
HTML:
<img id="image1" src="image1.jpg" onmouseover="showImages()" onmouseout="hideImages()" />
<img id="image2" src="image2.jpg" style="display:none;" />
<img id="image3" src="image3.jpg" style="display:none;" />
Javascript:
function showImages(){
document.getElementById('image2').style = '';
document.getElementById('image3').style = '';
}
function hideImages(){
document.getElementById('image2').style = 'display: none;';
document.getElementById('image3').style = 'display: none;';
}
Of course you should solve this with classes to clean up your code. This is just a basic example that works.
If you are using jQuery then when your document is ready:
<img class="main-image" data-target=".images-set1" src="mainImage1.jpg">
secondary images:
<div class="images-set1">
<img src="secondary1-1.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
....
</div>
with jQuery:
$('main-image').on('mouseover', function (event) {
$($(event.target).attr('data-target') + ' img').show();
})
.on('mouseout', function (event) {
$($(event.target).attr('data-target') + ' img').hide();
});
this will just hide/show the secondary image element related to the main image,
tell me if this is not exactly the behaviour you want.