I'm making an image carousel
see my fiddle : https://jsfiddle.net/gd2n6paw/8/
i'm new to jquery and just wanted to know that how can we make carousel 'next' and 'prev' controls thanks for the help .
you can see my code here also :
my html
<div class="slider">
<div class="container" id="img-slider">
</div>
</div>
<button onclick="prev()">
prev
</button>
<button onclick="next()">
next
</button>
my css
.slider{
min-height:300px;
max-width:400px;
border:1px solid #000;`
}
.container{
background-image:url('http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg');
min-height:300px;
max-width:400px;
}
my jQuery
(function(){
// main image carousel index.html you can customize it ...
var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];
function ImageSliderHome(){
imgSlider.fadeOut('5000' ,function(){
imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
}).fadeIn('5000');
counter++;
if(counter >= imgSliderContainer.length){
counter = 0;
}
}
function prev(){
?
}
function next(){
?
}
setInterval(ImageSliderHome,3000);
})();
What about this?
https://jsfiddle.net/gd2n6paw/12/
$('#next').click(function(){
counter++;
ImageSliderHome();
});
$('#prev').click(function(){
if(counter == 0)
counter = imgSliderContainer.length;
else
counter--;
ImageSliderHome();
});
Related
I'm coding my blog theme. I have this button to load in the entires, but I want to make that button change to "No more entries" once all is loaded. Any clue?
<script>
$(document).ready(function () {
size_li = $(".all .one").size();
x=3;
$('.all .one:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('.all .one:lt('+x+')').fadeIn();
});
});
</script>
Check if there are any hidden elements after starting to fade in the items. If there are no any, just show the message.
$(document).ready(function() {
size_li = $(".all .one").size();
x = 3;
$('.all .one:lt(' + x + ')').show();
$('#loadMore').click(function() {
x = (x + 5 <= size_li) ? x + 5 : size_li;
$('.all .one:lt(' + x + ')').fadeIn();
if (!$(".all .one:hidden").length) {
// Do something when everything is loaded
$(this).replaceWith("<p>No more entries<p>");
}
});
});
.one {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
<div class="one">6</div>
<div class="one">7</div>
<div class="one">8</div>
<div class="one">9</div>
<div class="one">10</div>
</div>
<button id="loadMore">Load more</button>
You could just add condition inside your click event :
if( size_li == $('.all .one:visible').length ){
$(this).replaceWith('No more entries');
}
Hope this helps.
Fiddle : http://jsfiddle.net/gLLvux07/
I am creating a countdown using javascript. its working fine when i click the button.
The issue is,
if I click the button when countdown running, it will not start from 0.
I am trying to clear interval in the beginning of function, but not working.
HTML :
<style>
.container {
width:50px;
height:25px;
overflow:hidden;
margin-top:100px;
margin-left:100px;
border:2px solid #ddd;
}
.count {
-webkit-transition: all 1;
-moz-transition: all 1;
transition: all 1;
}
</style>
<div class="container">
<div class="count">
<div>0</div>
</div>
</div>
<div style="text-align:center">
<input type="button" onclick="countdown();" value="Click Me" />
</div>
Javascript Code :
function countdown() {
clearInterval();
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++){
$(".container .count").append("<div>"+i+"</div>");
}
var count1 = 0;
var topmove = -10;
counting = setInterval(function(){
$(".container .count").css({'-webkit-transform': 'translateY('+topmove+'px)'});
count1 = count1+1;
topmove = topmove-10;
if(count1>40) {
clearInterval(counting);
}
},100);
}
Just define counting in global scope & do clearInterval(counting); in starting of function itself. You are not passing parameters to clearInterval.
DEMO
clearInterval requires a parameter telling the script which countdown to stop. Try something like this:
var counting;
function countdown() {
if (typeof counting === 'number') clearInterval(counting);
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++)
$(".container .count").append("<div>"+i+"</div>");
var count1 = 0,
topmove = -10;
counting = setInterval(function(){
$(".container .count").css({
'-webkit-transform': 'translateY('+topmove+'px)'
});
count1 = count1+1;
topmove = topmove-10;
if (count1>40){
clearInterval(counting);
}
},100);
}
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
I've written an image scroller in html/css/js, a very simple one: right button is clicked, I go through all images inside "holder"-div and change the class of the image after the one with classname="current".
But that's not where the problem lies, I think. Whenever I successively click on the left or the right button, the image in the div gets selected (blue selection box). If I successively click the left button, even the text above it gets selected.
<div class="grid_4 omega image_box">
<div id="txt_choose" class="image_txt">
this is helpful text
</div>
<div id="alt_spacer"></div>
<div id="image_content" class="image_content" onclick="chooseImageType(this)">
<div id="current" class="current"><img src="images/default1.png" /></div>
<div id="current" class="hidden"><img src="images/default2.png" /></div>
</div>
<!--- left button --->
<div class="image_btn_left" onclick="showPrev()"></div>
<!--- right button --->
<div class="image_btn_right" onclick="showNext()"></div>
</div>
and this is the css:
.image_btn_right
{
width : 20px;
height : 20px;
position : relative;
float : left;
margin-top : -170px;
margin-left : 260px;
z-index : 4;
cursor : pointer;
background-image: url('../images/right.png');
}
.image_btn_left
{
width : 20px;
height : 20px;
position : relative;
float : left;
margin-top : -170px;
margin-left : 20px;
z-index : 4;
cursor : pointer;
background-image: url('../images/left.png');
}
.image_content
{
height : 280px;
background-color: white;
margin : 10px;
}
on request, my javascript:
function showNext()
{
//vars
var shown = false;
var current;
$('#image_content > div').each(function()
{
if($(this).attr('class') == "current")
{
current = $(this);
shown = true;
}
else if($(this).attr('class') == "hidden" && shown == true)
{
current.hide();
current.attr('class', 'prev');
current.attr('id', '');
$(this).show();
$(this).attr('class', 'current');
$(this).attr('id', 'current');
shown = false;
}
});
}
Is there anyway to stop the image and the text above to be selected like that (without actually making them not selectable)?
Could it be because of the relative position of the buttons and their z-index..?
This works in your JS fiddle.
function showNext()
{
//vars
var shown = false;
var current;
window.getSelection().removeAllRanges();
$('#image_content > div').each(function()
{
if($(this).attr('class') == "current")
{
current = $(this);
shown = true;
}
else if($(this).attr('class') == "hidden" && shown == true)
{
current.hide();
current.attr('class', 'prev');
current.attr('id', '');
$(this).show();
$(this).attr('class', 'current');
$(this).attr('id', 'current');
shown = false;
}
});
}
function showPrev()
{
window.getSelection().removeAllRanges();
//vars
var prev_present = false;
var prev;
$('#image_content > div').each(function()
{
if($(this).attr('class') == "prev")
{
prev = $(this);
prev_present = true;
}
else if($(this).attr('class') == "current" && prev_present == true)
{
$(this).hide();
$(this).attr('class', 'hidden');
$(this).attr('id', '');
prev.show();
prev.attr('class', 'current');
prev.attr('id', 'current');
prev_present = false;
}
});
}
best regards
Jonas
I found the answer and it was painfully easy.. >_>
I just needed to wrap the buttons in another div, so they became more eperated from the rest of the html.
Like so:
<div>
<!--- left button --->
<div class="image_btn_left" onclick="showPrev()"></div>
<!--- right button --->
<div class="image_btn_right" onclick="showNext()"></div>
</div>
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.