I created a kind of fake scroll using JS as my boss is using a Mac and scrollbars are turned off by default and he wanted to see what was going on.
My code for this is like so:
$(function() {
var popular_products_span = $("#popular_products_span");
var items = popular_products_span.children();
popular_products_span.prepend('<div id="right-button"><</div>');
popular_products_span.append('<div id="left-button">></div>');
items.wrapAll('<div id="inner" />');
popular_products_span.find('#inner').wrap('<div id="outer"/>');
var outer = $('#outer');
var updateUI = function() {
var maxWidth = outer.outerWidth(true);
var actualWidth = 0;
$.each($('#inner >'), function(i, item) {
actualWidth += $(item).outerWidth(true);
});
};
updateUI();
$('#right-button').click(function() {
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos - 300
}, 300);
});
$('#left-button').click(function() {
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos + 300
}, 300);
});
$(window).resize(function() {
updateUI();
});
});
#popular_products_span{
overflow:hidden;
}
img{
padding:10px;
}
#outer {
float:left;
width:400px;
overflow:hidden;
white-space:nowrap;
display:inline-block;
}
#left-button {
float:left;
}
#right-button {
float:left;
}
#inner:first-child {
margin-left:0;
}
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="popular_products_span">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
</span>
However, I want it to scroll through endlessly so instead of coming to an end you will go back to the start again and am not sure how to go about this.
This is what I ended up using much easier
https://kenwheeler.github.io/slick/
Related
I try to create my own JQuery carousel using this code as example http://coolcodez.net/create-infinite-carousel-in-jquery-using-a-few-lines-of-code/
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width();
setInterval(function() {
carousel.delay(1000).animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find('>:first-child');
first.remove();
$(this).append(first);
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});
http://jsfiddle.net/n8b65qbb/33/
I need to shift one image to the left every time, but my script doesn't work properly.
How can I fix it and make it work the right way ?
There are some errors in your code. First, I think the carousel variable should point to the ul, not to the div. The selector for the first variable is weird. Also, you should use detach instead of remove. By the way, there was a "jump" because you're not taking into account the margin between the list items in the animation.
Here's a working version (still needing big improvement):
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width() + 15; // Hardcoded margin
setInterval(function () {
carousel.animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find("li:first-child").detach();
$(this).find("ul").append(first); // The "ul" should be cached
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});
Some thoughts and changes:
I would suggest to constrain your HTML and CSS to the really needed elements to achieve the desired, and that's UL. keep it minimalistic and simple:
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
</ul>
therefore that's the only needed CSS you need:
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
Regarding your plugin, this is a simple way to achieve the desired, looping a function instead of using a setInterval:
(function($) {
$.fn.carousel = function( options ) {
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(2000).animate({scrollLeft : w}, 700, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
You can see from the code above that there's no hardcoded width values (beside the delay and animation, but on that later) cause of the use of outerWidth(true);which will account paddings, margins , borders of your LI element.
Now you're building a plugin, right? You might want to allow the user to easily modify default Plugin values like:
$('#carousel-1').carousel({
pause : 3400,
animate : 700
});
simply extend your plugin to accept editable options:
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({ // Default Settings
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
$(function () { // DOM ready
$('#carousel-1').carousel();
});
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
</ul>
Regarding a better UX, I would also sugget to pause completely your gallery on mouseenter, and restart your animations on mouseleave (though a setInterval might be best suited in that case.)
http://jsfiddle.net/mQHEs/23/So I found this really neat jQuery, Fade scroll code here: Change the opacity based on elements current offset.
However I noticed that this only works in one column. If one has two columns with floated items, only the items in the left column are effected by the function (See the jsfiddle).
Does anyone have a solution for this?
http://jsfiddle.net/mQHEs/23/
html:
<img src="http://lorempixel.com/640/480/food/1" />
<img src="http://lorempixel.com/640/480/food/2" />
<img src="http://lorempixel.com/640/480/food/3" />
<img src="http://lorempixel.com/640/480/food/4" />
<img src="http://lorempixel.com/640/480/food/5" />
<img src="http://lorempixel.com/640/480/food/6" />
<img src="http://lorempixel.com/640/480/food/7" />
<img src="http://lorempixel.com/640/480/food/8" />
<img src="http://lorempixel.com/640/480/food/9" />
<img src="http://lorempixel.com/640/480/food/10" />
CSS:
img {width: auto; max-width: 50%; height: auto; float: left;}
img {display:block; margin: 10px auto}
JS:
var $win = $(window);
var $img = $('img');
$win.scroll( function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.prev().offset();
if(prev){
var pt=0;
pt=prev.top;
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
Change
var prev=$self.prev().offset();
to
var prev=$self.prev().prev().offset();
JSfiddle
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself
How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts :
http://jsfiddle.net/eT7SD/
Html Code
<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs" width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA" width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA" width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw" width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_" width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ" width="200" height="115" /></div>
Css Code
<style type="text/css">
#apCenterDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 571px;
top: 209px;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 570px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 821px;
top: 134px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 822px;
top: 328px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 572px;
top: 385px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 319px;
top: 329px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 319px;
top: 135px;
}
</style>
Script
<script>
$(document).ready(function(e) {
setInterval(function() {
var imgfirstSrc = $("#img-1").attr("src");
var imgSecSrc = $("#img-2").attr("src");
var imgthirdSrc = $("#img-3").attr("src");
var imgfourthSrc = $("#img-4").attr("src");
var imgfifthSrc = $("#img-5").attr("src");
var imgsixthSrc = $("#img-6").attr("src");
$("#img-2").attr("src",imgfirstSrc);
$("#img-3").attr("src",imgSecSrc);
$("#img-4").attr("src",imgthirdSrc);
$("#img-5").attr("src",imgfourthSrc);
$("#img-6").attr("src",imgfifthSrc);
$("#img-1").attr("src",imgsixthSrc);
},1000);
});
</script>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried #Cristi Pufu code but I want more modification
Efforts
http://jsfiddle.net/SaNtf/
Using jQuery Animation: http://jsfiddle.net/eT7SD/6/
Using mathand jQuery : http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/
Just add a class 'box' to your animating divs like in the fiddle and use this js:
$(document).ready(function(e) {
var animate = function(){
var boxes = $('.box');
$.each(boxes, function(idx, val){
var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();
$(val).animate({
"left" : coords.left,
"top" : coords.top
}, 1500, function(){})
});
}
animate();
var timer = setInterval(animate, 2000);
});
EDIT:
$(document).ready(function(e) {
var angles = [90, 45, 315, 270, 225, 135];
var unit = 215;
var animate = function(){
$.each($('.box'), function(idx, val){
var rad = angles[idx] * (Math.PI / 180);
$(val).css({
left: 550 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
angles[idx]--;
});
}
var timer = setInterval(animate, 10);
});
You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:
Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>
Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});
I followed a tutorial to create a simple javascript slideshow but I am having a strange bug... The first 2 cycles work perfectly, but once the counter resets the slideshow begins showing the previous slide quickly then trying to fade in the correct slide. Any idea what is causing this?
I have 3 images (named Image1.png, Image2.png, and Image3.png) in a folder for my simple slideshow and 3 divs set up like this:
<div id="SlideshowFeature">
<div id="counter">
3
</div>
<div class="behind">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
<div class="infront">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
</div>
My javascript looks like this
var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc
function changeImage() {
imagesInShow = "3";
currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imagesInShow) {
nextImage = 1;
}
else {
nextImage = currentImage + 1;
}
currentSrc = $(".infront img").attr("src");
nextSrc = "SlideShow/image" + nextImage + ".png";
$(".behind img").attr("src", currentSrc);
$(".infront").css("display", "none");
$(".infront img").attr("src", nextSrc);
$(".infront").fadeIn(1000);
$("#counter").html(nextImage);
setTimeout('changeImage()', 5000);
}
$(document).ready(function () {
changeImage();
});
EDIT:
Also here is my CSS
#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;
}
#SlideshowFeature div
{
width: 800px;
height:300px;
position:absolute;
}
#counter
{
display:none;
}
The problem seem to be in your HTML structure (and not in your JS):
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
I think you meant to put image1.png and then image2.png
.infront must be in front and .behind must be behind
.behind {
z-index: 1;
}
.infront {
z-index: 255;
}
And I also moved re-scheduling logic to fadeIn callback:
$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});
$("#counter").html(nextImage);
//setTimeout('changeImage()', 2500);
Looks good for me now.