Hello,
I'm doing a website with a javascript slider. I want to use only specific images from one folder for the slider, not all of the img in the DOM. Because I'm adding more img which shouldn't be part of the slider....
I'm using this script:
$(function(){
var i= 0;
//when the next button is clicked on
$('.next').on("click", function(){
//increase the display picture index by 1
i = i + 1;
//if we are at the end of the image queue, set the index back to 0
if (i == $('img').length) {
i=0;
}
//set current image and previous image
var currentImg = $('img').eq(i);
var prevImg = $('img').eq(i-1);
//call function to animate the rotation of the images to the right
animateImage(prevImg, currentImg);
});
//when the previous button is clicked on
$('.previous').on("click", function(){
//if we are at the beginning of the image queue, set the previous image to the first image and the current image to the last image of the queue
if (i==0) {
prevImg = $('img').eq(0);
i=$('img').length-1;
currentImg = $('img').eq(i);
}
//decrease the display picture index by 1
else {
i=i-1;
//set current and previous images
currentImg = $('img').eq(i);
prevImg = $('img').eq(i+1);
}
//call function to animate the rotation of the images to the left
animateImageLeft(prevImg, currentImg);
});
//function to animate the rotation of the images to the left
function animateImageLeft(prevImg, currentImg) {
//move the image to be displayed off the visible container to the right
currentImg.css({"left":"100%"});
//slide the image to be displayed from off the container onto the visible container to make it slide from the right to left
currentImg.animate({"left":"0%"}, 1000);
//slide the previous image off the container from right to left
prevImg.animate({"left":"-100%"}, 1000);
}
//function to animate the rotation of the images to the right
function animateImage(prevImg, currentImg) {
//move the image to be displayed off the container to the left
currentImg.css({"left":"-100%"});
//slide the image to be displayed from off the container onto the container to make it slide from left to right
currentImg.animate({"left":"0%"}, 1000);
//slide the image from on the container to off the container to make it slide from left to right
prevImg.animate({"left":"100%"}, 1000);
}
});
Thank you for any help!
Instead of calling $('img') every time you need the list of images, maintain the array of the images that you want displayed.
For example, if you can give all the img tags for the slider class="slider-img" to make this selection easier.
var imgs = $('img.slider-img');
And replace $('img') in your code with imgs.
Or if you want from all the images served from a specific web address or "folder", you can do the following:
var address = "example.com/silder_imgs";
var imgs = $('img').filter(function() { return $(this).attr(a).includes(address) });
I'm using a free jquery gallery and I want to make as many galleries as I want on the page. Problem is how the javascript is written will require to duplicate and rename, the code. Here's what the javascript that renders the gallery looks like
$(document).ready(function(){
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
// Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){
// Rotating the images counterclockwise
return (-90*i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
// Enlarging the slideshow and photo:
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
if(direction == 'next'){
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
else {
// Showing the bottomost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degress so we can add 90 or -90 to rotate it to its new value.
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
else{
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('#previousLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('#nextLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex(){
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
});
the var slideShow gets referenced all over the script, I was thinking of using an onclick but this would be better if it was wrapped in a function and called on the go for all classes with a name.
Here's the html
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
<li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
<li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
<li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
</ul>
</div>
<a id="previousLink" href="#">»</a>
<a id="nextLink" href="#">«</a>
</div>
I think one easy solution is to use a wrap all galleries in an element, then use classes instead of IDs to target them like
$(document).ready(function() {
$('.slide-container').each(function() {
var slideShow = $('.slide-show', this),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if ($.support.transform) {
// Modern browsers with support for css3 transformations
li.find('img').css('rotate', function(i) {
// Rotating the images counterclockwise
return (-90 * i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer', function(e, direction, degrees) {
// Enlarging the slideshow and photo:
slideShow.animate({
width: 510,
height: 510,
marginTop: 0,
marginLeft: 0
}, 'fast', function() {
if (direction == 'next') {
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
ul.find('li:first').fadeOut('slow', function() {
$(this).remove().appendTo(ul).show();
updateZindex();
});
} else {
// Showing the bottomost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = ul.find('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degress so we can add 90 or -90 to rotate it to its new value.
slideShow.animate({
rotate: Math.round($.rotate.radToDeg(slideShow.css('rotate')) + degrees) + 'deg'
}, 'slow').animate({
width: 490,
height: 490,
marginTop: 10,
marginLeft: 10
}, 'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext', function() {
slideShow.trigger('rotateContainer', ['next', 90]);
});
slideShow.bind('showPrevious', function() {
slideShow.trigger('rotateContainer', ['previous', -90]);
});
} else {
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext', function() {
ul.find('li:first').fadeOut('slow', function() {
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious', function() {
var liLast = ul.find('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('.previous', this).click(function() {
if (slideShow.is(':animated')) {
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('.next', this).click(function() {
if (slideShow.is(':animated')) {
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex() {
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index', function(i) {
return cnt - i;
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
<div class="slide-show">
<ul>
<li>
<img src="img/photos/1.jpg" width="100%" alt="Fish" />
</li>
<li>
<img src="img/photos/2.jpg" width="100%" alt="Ancient" />
</li>
<li>
<img src="img/photos/3.jpg" width="100%" alt="Industry" />
</li>
<li>
<img src="img/photos/4.jpg" width="100%" alt="Rain" />
</li>
</ul>
</div>
<a class="previous" href="#">»</a>
<a class="next" href="#">«</a>
</div>
<div class="slide-container">
<div class="slide-show">
<ul>
<li>
<img src="img/photos/1.jpg" width="100%" alt="Fish" />
</li>
<li>
<img src="img/photos/2.jpg" width="100%" alt="Ancient" />
</li>
<li>
<img src="img/photos/3.jpg" width="100%" alt="Industry" />
</li>
<li>
<img src="img/photos/4.jpg" width="100%" alt="Rain" />
</li>
</ul>
</div>
<a class="previous" href="#">»</a>
<a class="next" href="#">«</a>
</div>
Im trying to do infinite horizontal image gallery but cannot figure out few problems.I got a div that has 100% width and inside second div that has very big width so the images can be next to each other.Im in testing phase so function is running immediately after page loads so the gallery is moved left by margin of width first image and then it has to be appended as last child and its looks like thats working but right after first append its happening on and on with another images.How can i avoid it?And my second question is when i want to do the moving on hover for example on some arrow as long as im over that how can i cycle this function correctly?Thanks very much.
Here is the fiddle.
HTML
<div id="slider">
<div id="slide-container">
<div class="slide" id="slide"><img src="clique.jpg"></div>
<div class="slide"><img src="rollyx.jpg"></div>
<div class="slide"><img src="grafrollyx.jpg"></div>
<div class="slide"><img src="grafagent.jpg"></div>
<div class="slide"><img src="grafrollyx.jpg"></div>
</div>
</div>
JavaScript
function slider(){
var what = $('#slide').width();
$('.slide').first().animate({marginLeft: -(what)}, 0, setTimeout(function() {
$('.slide')
.first()
.appendTo($('.slide').parent())
.css({ marginLeft: 0 });
}, 1000))
}
i guss this is a better way of doing that
Here is a FIDDLE of the gallery.
Put all your images in a hidden div
Clone them and put them in the visible div
Animate the image by changing the left margin
You can adjust the time between images by the set interval function
You can adjust the slidein time by the animate time.
JS
var pictxtnumber = 1;
loadpictxt(pictxtnumber);
var fadeintime = 500;
animatediv();
function animatediv()
{
var number = 0;
var interval = setInterval(function() {
pictxtnumber = pictxtnumber + 1;
if(pictxtnumber > 6)
{
pictxtnumber = 1;
}
loadpictxt(pictxtnumber);
}, 1000);
}
function loadpictxt(num)
{
$('.picturediv').html('');
$(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
$('.picturediv img').css('margin-left', '100px');
$('.picturediv img').animate({marginLeft: "0"}, 100);
}
I am managing a website for my company that was made by someone else ($24,000) and we edited the slideshow which has images with buttons on the bottom that navigate to the corresponding photo. What we did was add an image with a link and a button to the slideshow. The problem is it works fine in chrome but not in I.E.. In I.E. the button is there but the last button just gives a blank image (the image we added went in the first button). It also gives a strange border around the first (added) image. Here is the HTML. the new first image has a link where the others do not. I have looked through the javascript and jquery and it doesn't appear to dictate anything about how many images/buttons are allowed or anything. Sorry for the long code and I appreciate you taking the time to read it.
<a href="http:\\www.supplysourceoutlet.com" target="_blank">
<img src="/images/home-slideshow/photo-outlet.jpg" alt="" width="684" height="325"></a>
<img src="/images/home-slideshow/photo-01.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-02.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-03.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-04.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-05.jpg" alt="" width="684" height="325">
</div>
</div>
<div class="paging">
'
Here is the javascript for the slideshow:
$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determine the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
The reason for the border and that only the first (added) one links is because it is the only one with an a tag around it. You could add a border="0" to the img tag to get rid of the border like this:
<a href="http:\\www.supplysourceoutlet.com" target="_blank">
<img src="/images/home-slideshow/photo-outlet.jpg" alt="" border="0" width="684" height="325">
</a>
To fix the other part I need to know where the div with the class image_reel is located could you post more of your html?
So I have a slideshow on my website with images with no links. It also has buttons on the bottom to navigate to the other pictures, one for each image. I am trying to add another image, this one with a link to another part of the website. I would believe to add the picture
to the list of
<img src="/images/home-slideshow/photo-01.jpg" alt="" width="684" height="325">"
<img src="/images/home-slideshow/photo-02.jpg" alt="" width="684" height="325">"
"
I would just add the same but add
<img src="/image/home-slideshow/photo-06.jpg" alt="" width ="684" height="325">
The question I had was is there anything else I have to change somewhere else?
Also, I have to add a button for that image, would adding this linked photo to the slideshow affect the buttons in some weird way?
EDIT:
here is my slideshow javascript. But it doesnt look like it makes them strictly images?
$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determine the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});