I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change
function setImage(source) {
// console.log(source);
$('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
$('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
console.log($('#zoom_img').attr("href"));
$('.easyzoom').easyZoom();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a id="zoom_img" href="">
<img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
</a>
</div>
You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:
//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api = easyzoom.data ('easyZoom');
//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {
//std_src = the source to your standard-image (small verison)
//zoom_src = the source to your zoom-image (big version)
api.swap (std_src, zoom_src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>
<br><br>
<div class="easyzoom easyzoom--overlay">
<a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
<img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
</a>
</div>
Related
Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
Use a label and assign it [for] attribute with the value of the input id:
<label for='upload'></label>
<input id='upload' type='file'>
When the label is clicked then the input that it is associated with is as well.
Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).
$('main').on('click change', '.file, .upload, .reply', function(e) {...
Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.
99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo).
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});
i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>
I'm trying to get this ad to work, and I have it set up so that it will turn into a gif onMouseOver, and thats working fine, but I want it to go back to the static image onMouseOut. Here is my code
HMTL
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="">
</a>
</div>
CSS
.RightAdvert {
float: left;
width: 8%;
}
The Advertisment class doesn't have any styles
Script
<script>
function playAnimation() {
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
</script>
Add a method on onmouseout event, onmouseout="showStatic()
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="showStatic()">
</a>
</div>
Then change the gif with static image in function showStatic() function:
<script>
function playAnimation()
{
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
function showStatic()
{
document.getElementById('animation').src = "squeezy-cheesy.png";
}
</script>
Completely new to coding over here. Learning the basics.
How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:
Current picture
But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})
$("#bigImage").click(function(){
paused=!paused;
})
Picture of how it looks is on my post about it.
Thank you!
Full code
<html>
<head>
<title> FWP - Gallery </title>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="bootstrap.css">
<link rel="stylesheet"
type="text/css"
href="mystyles.css">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward"><</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">></button>
</div>
</div>
</div>
<script>
var paused=false;
setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);
$("#bigImage").click(function(){
paused=!paused;
});
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})
</script>
</body>
</html>
The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.
Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).
$(".crop-img")
$("#bigImage")
$("#image"+counter)
This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.
$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();
These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).
Also instead of a function name, you can just inline the function instead:
$("#bigImage").click(function(){
paused=!paused;
})
This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.
Such as if you want to actually go to the image, as in your html example, put this line in there:
window.location.href = "someHrefHere";
If you want to know the the src of the current bigImage, you can grab it with jquery:
var myhref = $("#bigImage").attr("src");
You can put it together from there.
Happy Coding!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.
I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`
I use this code to make a onmouseover change pictures. but in IE it works, in firefox it shows wrong, where is the problem? And can anyone add a onmouseout function that return to the first picture for me? Thanks.
<script type="text/javascript">
function changeimage(rel){
document.getElementById("image").src=rel;
}
</script>
<img src="img1.jpg" id="image" />
<a onmouseover="changeimage('img1.jpg')" rel="img1.jpg">img1</a>
<a onmouseover="changeimage('img2.jpg')" rel="img2.jpg">img2</a>
<a onmouseover="changeimage('img3.jpg')" rel="img3.jpg">img3</a>
you can use:
<script type="text/javascript">
function changeimage(rel)
{
var img = document.getElementById("image");
img.setAttribute("orig", img.src);
img.src=rel;
}
function SetOriginal()
{
var img = document.getElementById("image");
img.src = img.getAttribute("orig");
}
</script>
<img src="img1" id="image" />
<a onmouseover="changeimage('img1')" onmouseout="SetOriginal()" rel="img1">img1</a>
<a onmouseover="changeimage('img2')" onmouseout="SetOriginal()" rel="img2">img2</a>
<a onmouseover="changeimage('img3')" onmouseout="SetOriginal()" rel="img3">img3</a>
to return to the original image.
I tested this on firefox(3.6.12) and it is working