I need to create an css for image ie height and width. how can create?
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
.pf-text-align-center, .pb-text-align-center { text-align: center; }
<script type="text/javascript">
var $ = jQuery.noConflict();
$('#toHide').doTimeout(1000, function() { $('#toHide').find('#safeForm35').submit();});
</script>
Issue: dynamic animation action is not happening in IE. it may resolve by doing correct height and width. How can i see what is the required height and width? and other details?
EDIT
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
Bad news for you - you're hitting a known bug in IE.
In IE, if you load an animated GIF, but it's invisible when it loads, then the animation won't work when you make it visible.
The work-around is to load the image at the time you need to display by setting the src attribute, rather than pre-loading it and making it visible.
Reference: http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer
Related
I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com. When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out. After running only the first image has class style="transform: scale (1);".
You can see it working here
So how should I fix to zoom in/zoom out each image in each div? I would appreciate it if you suggest me how to fix this!
Thanks very much!
Here is the code
Jquery
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('#img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
HTML
<div class="post-header">
<div class="desc-image-list">
<div class="full">
<div class="natural-thumbnail">
<img id="img" src="image1.img"> // After running only the first image has class style="transform: scale (1);"
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 600px;">
<img id="img" src="image2.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 0;">
<img id="img" src="image3.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
</div>
</div>
</div>
CSS
#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}
In addition to #freedomn-m answer.
You can use img tag as a css selector .natural-thumbnail img you don't need any class. update below js and will work fine.
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('.natural-thumbnail img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
Id of element should be unique on one html page.
you can use this
$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');
I am getting a preload box for a img tag from the code below.
<script>
document.addEventListener('DOMContentLoaded', function(){
load()
}, false);
function grab(){
var urlsource = document.getElementById("image").value="";
return urlsource.length > 0;
}
function load(){
var imgurl = document.getElementById("image").value;
document.getElementById("replace").src=imgurl;
return imgurl.length > 0;
}
</script>
<style>
div.output {
height: 200px;
width: 200px; }
img#replace {
display: none;
}
img#replace[src]{
height: 150px;
width: 150px;
position: absolute;
display: inline-block;
}
</style>
</head>
<body>
<textarea id="image" onload="grab();" onkeyUp="load();" onkeyPress="load();"></textarea><br>
<a id="demo1" href="https://www.google.co.nz/">
<div class="output">
<img id="replace"/>
</div>
</a>
</body>
How the preload image can be removed while keeping the DOMContentloaded event? Thanks very much!
Every <img/> must have a src. If it does not, it's treated as broken.
Give it a src, even if that means creating a 1x1 transparent GIF pixel.
<img id="replace" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
EDIT: On closer inspection, it seems that your code is immediately running when the document has loaded, with the code effectively reading:
image.src = ""; // because the textarea is empty
Of course, this is not a valid image, but it is still an image, so it appears as a broken one. You may want to add an onerror event to the image to hide it if it fails to load.
<img id="replace" onerror="this.removeAttribute('src');" />
(This should work because of your CSS hiding source-less images)
I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});
it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo
I have a swipe gesture working the way I would like, when the user swipes from right/left the images toggle. Now I just want to add a different link to each img src, so slider1 has a different link associated to it then slider2, etc. Can someone please help me figure this out?
<pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
<title>Presentation</title>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
#mySwipe div b {
display:block;
margin:0px;
margin-top:240px;
background:url("");
height:1280px;
width:720px;
}
</style>
<script type="text/javascript">
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(300, function(){ $('').hide(); });
}
}
);
});
</script>
</head>
<body>
<img src="../question_header/question.png" />
<div class="nfooter"></div>
<div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" /></div>
<div><img src="../slider/slider2.png" /></div>
<div><img src="../slider/slider3.png" /></div>
<div><img src="../slider/slider4.png" /></div>
</div>
</div>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<div class='container'>
<div class='inner'>
</div>
</div>
</body>
</html>
</pre>
THIRD ANSWER:Change image DEMO HERE
jQuery(document).ready(function($) {
$('img[slideurl]').click(function(){
if($(this).is(':last-child')){
$(this).insertBefore($('img[slideUrl]').first());
}
else {
$(this).next('img[slideUrl]').insertBefore($(this));
}
});
});
SECOND ANSWER:
After i read your comments ,i suggest using jQuery,to add a click event to every img that has a custo attribute , for example slideUrl='http://stackoverflow.com' :
HTML:
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" slideUrl='http://link1.com' /></div>
<div><img src="../slider/slider2.png" slideUrl='http://link2.com'/></div>
<div><img src="../slider/slider3.png" slideUrl='http://link3.com'/></div>
<div><img src="../slider/slider4.png" slideUrl='http://link4.com'/></div>
</div>
JS code:
$('img[slideUrl]').click(function(){
window.location.href = $(this).attr('slideUrl');
});
CSS:
img[slideUrl]{
cursor:pointer;
}
FIRST ANSWER:
You can do it using <a> element with href attribute like this :
<div><a href='link1'><img src="../slider/slider1.png" /></a></div>
Try like this:-
<div>
<a href='link1' style="display: block; height: 100%">
<img src="../slider/slider1.png" alt=".." />
</a> </div>
This will make the entire <div> clickable.
I am new to bootstrap and would like to enlarge all images with class img-rounded on hoverring
I implemented it like this:
<div class="container">
<div class="row">
<div class="span4">
<div class="well">
<img src="MyImage.png" class="img-rounded">
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('.img-rounded').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
content: function () {
return
'<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
+$(this)[0].src + '" />';
}
});
});
</script>
Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this?
This is caused by the popovers default max-width: 276px. Simply add
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(or any other value, auto does not work here) and the popover will fit the image.
You could do this easily just using css.
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
Also you can apply a number of additional effects as needed with far less code.
You can also manage the parent div accordingly to match this css rule. Not ALL things require JS.