I created tabs with image.When I scroll on the image it will zoom in and zoom out. But I am facing the problem,in only first tab it is working with function zoom in & zoom out(when i scroll).I didn't get what i'm doing wrong.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zoom</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
ul li{
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
<span class="pull-right">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
</span>
</div>
<div class="panel-body">
<br />
<br />
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="container">
<div class="slide">
<img class='zoom' src='daisy.jpg' alt='Daisy!' width='555' height='320'/>
</div>
</div>
<br />
<!-- <input type="button" value="click me"> -->
</div>
<div class="tab-pane" id="tab2">
<div class="container">
<div class="slide">
<img class='zoom' src='abc.jpg' alt='abc' width='555' height='320'/>
</div>
</div>
<br />
<!-- <input type="button" value="click me"> -->
</div>
<div class="tab-pane" id="tab3">
<div class="container">
<div class="slide">
<img class='zoom' src='xy.jpg' alt='xy' width='555' height='320'/>
</div>
</div>
<br />
<!-- <input type="button" value="click me"> -->
</div>
<div class="tab-pane" id="tab4">
<div class="container">
<div class="slide">
<img class='zoom' src='rec.png' alt='rec' width='555' height='320'/>
</div>
</div>
<br />
<!-- <input type="button" value="click me"> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <img class='zoom' src='daisy.jpg' alt='Daisy!' width='555' height='320'/>
<br />
<img class='zoom' src='daisy.jpg' alt='Daisy!' width='555' height='320'/> -->
<script src="wheelzoom.js"></script>
<script>
wheelzoom(document.querySelector('img.zoom'));
</script>
</body>
</html>
wheelzoom.js
window.wheelzoom = (function(){
var defaults = {
zoom: 0.10,
maxZoom: false,
initialZoom: 1,
};
var main = function(img, options){
if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
var settings = {};
var width;
var height;
var bgWidth;
var bgHeight;
var bgPosX;
var bgPosY;
var previousEvent;
var cachedDataUrl;
function setSrcToBackground(img) {
img.style.backgroundRepeat = 'no-repeat';
img.style.backgroundImage = 'url("'+img.src+'")';
cachedDataUrl = 'data:image/svg+xml;base64,'+window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="'+img.naturalWidth+'" height="'+img.naturalHeight+'"></svg>');
img.src = cachedDataUrl;
}
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
}
function reset() {
bgWidth = width;
bgHeight = height;
bgPosX = bgPosY = 0;
updateBgStyle();
}
function onwheel(e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
// We have to calculate the target element's position relative to the document, and subtrack that from the
// cursor's position relative to the document.
var rect = img.getBoundingClientRect();
var offsetX = e.pageX - rect.left - window.pageXOffset;
var offsetY = e.pageY - rect.top - window.pageYOffset;
// Record the offset between the bg edge and cursor:
var bgCursorX = offsetX - bgPosX;
var bgCursorY = offsetY - bgPosY;
// Use the previous offset to get the percent offset between the bg edge and cursor:
var bgRatioX = bgCursorX/bgWidth;
var bgRatioY = bgCursorY/bgHeight;
// Update the bg size:
if (deltaY < 0) {
bgWidth += bgWidth*settings.zoom;
bgHeight += bgHeight*settings.zoom;
} else {
bgWidth -= bgWidth*settings.zoom;
bgHeight -= bgHeight*settings.zoom;
}
if (settings.maxZoom) {
bgWidth = Math.min(width*settings.maxZoom, bgWidth);
bgHeight = Math.min(height*settings.maxZoom, bgHeight);
}
// Take the percent offset and apply it to the new size:
bgPosX = offsetX - (bgWidth * bgRatioX);
bgPosY = offsetY - (bgHeight * bgRatioY);
// Prevent zooming out beyond the starting size
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
}
function drag(e) {
e.preventDefault();
bgPosX += (e.pageX - previousEvent.pageX);
bgPosY += (e.pageY - previousEvent.pageY);
previousEvent = e;
updateBgStyle();
}
function removeDrag() {
document.removeEventListener('mouseup', removeDrag);
document.removeEventListener('mousemove', drag);
}
// Make the background draggable
function draggable(e) {
e.preventDefault();
previousEvent = e;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', removeDrag);
}
function load() {
var initial = Math.max(settings.initialZoom, 1);
if (img.src === cachedDataUrl) return;
var computedStyle = window.getComputedStyle(img, null);
width = parseInt(computedStyle.width, 10);
height = parseInt(computedStyle.height, 10);
bgWidth = width * initial;
bgHeight = height * initial;
bgPosX = -(bgWidth - width)/2;
bgPosY = -(bgHeight - height)/2;;
setSrcToBackground(img);
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
img.addEventListener('wheelzoom.reset', reset);
img.addEventListener('wheel', onwheel);
img.addEventListener('mousedown', draggable);
}
var destroy = function (originalProperties) {
img.removeEventListener('wheelzoom.destroy', destroy);
img.removeEventListener('wheelzoom.reset', reset);
img.removeEventListener('load', load);
img.removeEventListener('mouseup', removeDrag);
img.removeEventListener('mousemove', drag);
img.removeEventListener('mousedown', draggable);
img.removeEventListener('wheel', onwheel);
img.style.backgroundImage = originalProperties.backgroundImage;
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
img.src = originalProperties.src;
}.bind(null, {
backgroundImage: img.style.backgroundImage,
backgroundRepeat: img.style.backgroundRepeat,
src: img.src
});
img.addEventListener('wheelzoom.destroy', destroy);
options = options || {};
Object.keys(defaults).forEach(function(key){
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
});
if (img.complete) {
load();
}
img.addEventListener('load', load);
};
// Do nothing in IE9 or below
if (typeof window.btoa !== 'function') {
return function(elements) {
return elements;
};
} else {
return function(elements, options) {
if (elements && elements.length) {
Array.prototype.forEach.call(elements, main, options);
} else if (elements && elements.nodeName) {
main(elements, options);
}
return elements;
};
}
}());
When i scroll it is zoom in and zoom out but only in first tab.What I did wrong,i can't understand.Please help me.Thank you.
Nice work i worked it out and find that you are using wheelzoom(document.querySelector('img.zoom')); here in this code you are using querySelector where this code will return only one element not all element instead of this code you need to use wheelzoom(document.querySelectorAll('img.zoom')); then your example will work . I have tried and its working
I am trying to develop interactive 3d viewer with Rotation and Zoom using Java script. I successfully developed a script to view product which rotates only in one axis(X-axis), but need script sample to view product which is taken in X,Y and Z axis. I have attached an image which shows camera placements.
Fig-1 Sample Camera placement
Fig -1 Shows camera positions where images are taken in single axis, This is achieved and below is the code.
<html>
<head>
<style type="text/css">
table img {
height: 250px;
width: 250px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
var xCurrent = 0;
var currentImgPos = 0;
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#product").attr("src", arr[0]);
$("#product").mouseleave(function () { xCurrent = 0; });
$("#product").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
if (xCurrent > relX) {
if (relX - xCurrent <= -5) {
if (currentImgPos >= 25) {
currentImgPos = 0;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos + 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
else {
if (relX - xCurrent >= 5) {
if (currentImgPos <= 0) {
currentImgPos = 25;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos - 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" id="product" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
</body>
</html>
Fig-2 New Camera placement
Fig -2 Shows camera positions where images are taken in X,Y and Z axis. Need sample code this part
I am trying to incorporate a preloader within my site and I would like the splash screen's loading bar to be in the shape of a custom logo. I have successfully created a clipping svg on text and images before, so I don't believe that this is where the problem is (see my jsfiddle).
I just need the loading bar's containing svg to clip the loading bar div in the shape of the inline svg.
I have included my code.
Thanks.
(function($) {
var items = new Array(),
errors = new Array(),
onComplete = function() {},
current = 0;
var jpreOptions = {
splashVPos: '35%',
loaderVPos: '75%',
splashID: '#jpreContent',
showSplash: true,
showPercentage: false,
autoClose: true,
onetimeLoad: false,
debugMode: false,
splashFunction: function() {}
}
//cookie
var getCookie = function() {
if( jpreOptions.onetimeLoad ) {
var cookies = document.cookie.split('; ');
for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
if ((parts.shift()) === "jpreLoader") {
return (parts.join('='));
}
}
return false;
} else {
return false;
}
}
var setCookie = function(expires) {
if( jpreOptions.onetimeLoad ) {
var exdate = new Date();
exdate.setDate( exdate.getDate() + expires );
var c_value = ((expires==null) ? "" : "expires=" + exdate.toUTCString());
document.cookie="jpreLoader=loaded; " + c_value;
}
}
//create jpreLoader UI
var createContainer = function() {
jOverlay = $('<div></div>')
.attr('id', 'jpreOverlay')
.css({
position: "fixed",
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 9999999
})
.appendTo('body');
jLoader = $('<svg></svg>')
.attr('id', 'jpreLoader')
.appendTo(jOverlay);
var posWidth = $(window).width() - $(jLoader).width();
$(jLoader).css({
position: 'absolute',
top: jpreOptions.loaderVPos,
left: Math.round((50 / $(window).width()) * posWidth) + '%'
});
jBar = $('<div></div>')
.attr('id', 'jpreBar')
.css({
width: '0%',
height: '100%'
})
.appendTo(jLoader);
}
//get all images from css and <img> tag
var getImages = function(element) {
$(element).find('*:not(script)').each(function() {
var url = "";
if ($(this).css('background-image').indexOf('none') == -1 && $(this).css('background-image').indexOf('-gradient') == -1) {
url = $(this).css('background-image');
if(url.indexOf('url') != -1) {
var temp = url.match(/url\((.*?)\)/);
url = temp[1].replace(/\"/g, '');
}
} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
url = $(this).attr('src');
}
if (url.length > 0) {
items.push(url);
}
});
}
//create preloaded image
var preloading = function() {
for (var i = 0; i < items.length; i++) {
if(loadImg(items[i]));
}
}
var loadImg = function(url) {
var imgLoad = new Image();
$(imgLoad)
.load(function() {
completeLoading();
})
.error(function() {
errors.push($(this).attr('src'));
completeLoading();
})
.attr('src', url);
}
//update progress bar once image loaded
var completeLoading = function() {
current++;
var per = Math.round((current / items.length) * 100);
$(jBar).stop().animate({
width: per + '%'
}, 500, 'linear');
if(jpreOptions.showPercentage) {
$(jPer).text(per+"%");
}
//if all images loaded
if(current >= items.length) {
current = items.length;
setCookie(); //create cookie
if(jpreOptions.showPercentage) {
$(jPer).text("100%");
}
//fire debug mode
if (jpreOptions.debugMode) {
var error = debug();
}
//max progress bar
$(jBar).stop().animate({
width: '100%'
}, 500, 'linear', function() {
//autoclose on
if( jpreOptions.autoClose )
loadComplete();
});
}
}
//triggered when all images are loaded
var loadComplete = function() {
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
onComplete(); //callback function
});
}
//debug mode
var debug = function() {
if(errors.length > 0) {
var str = 'ERROR - IMAGE FILES MISSING!!!\n\r'
str += errors.length + ' image files cound not be found. \n\r';
str += 'Please check your image paths and filenames:\n\r';
for (var i = 0; i < errors.length; i++) {
str += '- ' + errors[i] + '\n\r';
}
return true;
} else {
return false;
}
}
$.fn.jpreLoader = function(options, callback) {
if(options) {
$.extend(jpreOptions, options );
}
if(typeof callback == 'function') {
onComplete = callback;
}
//show preloader once JS loaded
$('body').css({
'display': 'block'
});
return this.each(function() {
if( !(getCookie()) ) {
createContainer();
getImages(this);
preloading();
}
else { //onetime load / cookie is set
$(jpreOptions.splashID).remove();
onComplete();
}
});
};
})(jQuery);
body{
display:none;
}
#jpreOverlay {
background-color: rgba(000, 000, 000, 0.87);
}
#jpreLoader{
width:300px;
height:300px;
}
#jpreBar {
background-size:30px 30px;
-moz-background-size:30px 30px;
-webkit-background-size:30px 30px;
-o-background-size:30px 30px;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
background-color:#E07300;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
-moz-clip-path: url(#clipping);
-o-clip-path: url(#clipping);
position: absolute;
}
#-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jPreLoader v2 - A jQuery preloader for Website</title>
<link rel="stylesheet" href="css/jpreloader.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jpreloader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson2/favicon.ico" />
<link rel="canonical" href="http://www.inwebson.com/demo/jpreloader-v2/" />
</head>
<body>
<section id="wrapper">
<div class="wrapper-inner">
<hgroup>
<h2>jPreLoader v2</h2>
<h3>A loading screen to preload images using jQuery</h3>
</hgroup>
<div class="container">
<ul id="set1" class="holder current">
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/181548_153793501342544_153515891370305_259700_7241508_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196528_158118380910056_153515891370305_283882_234528_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196556_159931940728700_153515891370305_293999_6261181_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/205687_165495210172373_153515891370305_326385_1869822_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/205600_167760236612537_153515891370305_338177_2160812_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/248150_174306909291203_153515891370305_374445_3774819_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/228343_171546129567281_153515891370305_358267_5126730_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/249232_174478049274089_153515891370305_375652_2662480_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/268903_186646411390586_153515891370305_435046_34596_n.jpg" /></li>
<div class=clearfix></div>
</ul>
<ul id="set2" class="holder">
<li><div id="li1"></div></li>
<li><div id="li2"></div></li>
<li><div id="li3"></div></li>
<li><div id="li4"></div></li>
<li><div id="li5"></div></li>
<li><div id="li6"></div></li>
<li><div id="li7"></div></li>
<li><div id="li8"></div></li>
<li><div id="li9"></div></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="description txtright">
Images by Mike Shaw, Cheshire UK based photographer.
</div>
</div>
</section>
<!-- This section is for Splash Screen -->
<section id="jSplash">
<section class="selected">
<svg width="82" height="82" id="jpreLoader" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="clipping">
<path stroke-opacity="0" fill-opacity="1" stroke-width="0" stroke="none" fill="#282525" d="M244,121.9L250.5,123.2C239.2,127.9 228.9,132.6 221.4,138.2L212.2,138.2L212.2,147.3C212.2,157.7 224.6,172.8 233.2,182.2L238.1,182.2C253.2,200.4 299.6,221.8 320.6,232.1C309.8,235.3 290.9,234.3 281.2,230.2L258.6,220.8C251,219.6 241.9,218.9 235.4,221.5C217.6,213.3 198.7,207 205.2,202.3C180.4,191.6 168.6,184.1 162.6,176.5L136.7,191.6C133.5,190 127,190.7 123.8,192.6L84.4,214.9C62.9,216.1 35.9,243.4 9.5,243.4C8.4,243.4 7.9,243.1 7.9,242.8C7.9,241.2 16.5,238.1 18.7,236.5C19.2,236.2 19.2,235.9 19.7,235.6L43.5,222.4L42.4,218.6L23.5,228.7C25.1,221.8 23.5,213.3 28.9,204.8L46.7,195.1C48.9,190.7 52.6,186.9 57.5,182.8L65,185L94.2,169C100.6,165.2 111.9,159.6 111.4,152.7C121.6,147.3 130.3,142.3 137.3,136.7C141.6,136.3 145.9,135.7 148.6,133.8C148.6,133.2 147.5,132.3 147.5,131.6C130.3,96.5 128.7,61.6 150.8,26.4C155.1,24.6 162.1,22 165.3,24.6L156.1,41.5C163.2,38.4 167.5,30.5 172.3,24.6C203.1,27.1 203.1,39.3 219.8,39.9L225.7,46.5C216.5,57.5 210.6,74.2 210.1,82.3L206.8,87L211.1,88.6C245.6,68.2 286.6,41.2 319.5,23.6L328.1,23.6L328.1,28C333.5,26.4 338.9,19.2 352.9,20.5L348.1,25.5C372.9,28.6 389.6,36.5 389.6,41.8C389.6,43.4 389.1,45 386.4,46.2L244,121.9M46.7,216.1L48.3,219.3C53.7,217.7 55.9,214.5 55.9,211.7L46.7,216.1M65,181.3L61.3,180.3C66.1,176.9 72,173.4 78,169.9L81.7,172.1L65,181.3M85,170.3L81.2,168.1C84.4,166.5 87.1,164.9 90.4,163.3L90.4,167.1L85,170.3M237.6,138.2L230,138.2L242.9,131.3L247.3,132.3L237.6,138.2M253.2,228.7L240.3,223.3C246.2,221.8 253.7,223.6 262.4,227.7L253.2,228.7z"></path>
</clipPath>
</defs>
</svg>
<h2>jPreLoader v2</h2>
<strong>A loading screen to preload images using jQuery</strong>
</section>
</section>
<!-- End of Splash Screen -->
<script>
$(document).ready( function() {
var timer; //timer for splash screen
//calling jPreLoader
$('body').jpreLoader({
splashID: "#jSplash",
loaderVPos: '30%',
autoClose: false,
splashFunction: function() {
//passing Splash Screen script to jPreLoader
$('#jSplash').children('section').not('.selected').hide();
$('#jSplash').hide().fadeIn(800);
timer = setInterval(function() {
splashRotator();
}, 4000);
},
});
//create splash screen animation
function splashRotator(){
var cur = $('#jSplash').children('.selected');
var next = $(cur).next();
if($(next).length != 0) {
$(next).addClass('selected');
} else {
$('#jSplash').children('section:first-child').addClass('selected');
next = $('#jSplash').children('section:first-child');
}
$(cur).removeClass('selected').fadeOut(800, function() {
$(next).fadeIn(800);
});
}
});
</script>
</body>
</html>
I was working with responsive web design and I wanted to slide some images in to a page. I tried some plugins but the problem with the plugin is it uses width and height property and also assigns position: absolute. So I thought of changing the src of the image myself using js and it worked fine, but can I give some transition effect to it?
Demo fiddle
What I have done is:
var i = 0;
var total = 2;
window.setInterval(function() {
show_hide();
}, 1000);
function show_hide() {
var img = $('.image-holder img, .image-holder2 img');
//alert(img.length);
if (i % 2 == 0) {
img[0].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i = 0;
}
else {
img[0].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
My HTML is as follows:
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Here's what I put together. jsFiddle
javascript
var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;
setInterval(function() {
showImage(i);
i++;
if (i > count) i = 0;
}, 2000);
function showImage(i) {
img.eq(i - 1).animate({
"opacity": "0"
}, 1000);
img.eq(i).animate({
"opacity": "1"
}, 1000);
}
HTML
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" />
</div>
CSS
.image-holder img{ opacity: 0;}
.image-holder { position: absolute; }