Develop Reference

Featured slider with new jQuery

I'm trying to run slider with new jQuery because some functions like rotate are deprecated. Slider works fine when page is uploaded and I'm working to load image from clicked tab from right side. When I clicked on tab, current image and current active tab are removed and new image and new active tab are loaded correctly than I call my startSlider(); function again but i'm loosing variable value of i so my startSlider(); running without loading image and active tab background. Please help me to solve this problem. This is slide image:
and this is my jQuery code:
$(function() {
var count = $(".ui-tabs-nav li").length;
var slideSpeed = 5000;
var fadingSpeed = 300;
var i = 1;
var $slider = $('#featured');
var interval;
function startSlider() {
interval = setInterval(function() {
$("#fragment-"+i).fadeOut(fadingSpeed, function() {
$(this).removeClass("ui-tabs-activated");
$('#nav-fragment-'+i).removeClass("ui-tabs-active");
a = i+1;
if (i == count) {
a = 1;
i = 0;
}
$('#nav-fragment-'+a).addClass("ui-tabs-active");
$("#fragment-"+a).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated");
});
i++;
});
}, slideSpeed); // End setInterval function
}
function stopSlider() {
clearInterval(interval);
}
$('.ui-tabs-nav-item > a').click(function(evt){
evt.preventDefault();
stopSlider();
i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5
var id = $(".ui-tabs-active > a").attr('href');
$(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background
$("#fragment-"+id).remove(); // This remove div with current image
$("#fragment-"+i).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated"); // Load new image
$('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background
});
startSlider(); // Start slider again
});
startSlider();
}); // jQuery function

Well, startslider() is using variable i to fadeout and remove active class, and variable a for fadein and add active class.
After click you are using variable i for fadein and adding active class.
Variable i is global, so when your restart startslider() it will use that i to fadeout.
Also, after click you are removing an element, but in the code your show right now I do not see anything that adds a new element or loads an image.

nivo-lightbox plugin slideIn images onclick of next or previous

I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation

Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');

Creating Image slider using only jQuery

I'm trying to create an image slider using Jquery.
What I have is a main div with 3 sub divs with images.
Take a look at this fiddle. FIDDLE
Ok now i got the design just the way I want it. What is missing is the functionality.
When i hover over the div or the images, I want it to act like a clockwise slider.
This may look a bit confusing. Take a look at this demo. This is what i want.
DEMO
This is what i want.The right div gets filled with the middle image src , the middle div gets the left div src. The left div get an new src from an array of images i have defined. Currently i can only change one image div at a time.
However I don't want to use any more plugins. Only Jquery plugin. A CSS only solution would be the best but I do not think it will be possible.
JQUERY
$('.maindiv img').mouseover(function () {
var image = this;
loop = setInterval(function () {
if (i < images.length - 1) {
i++;
$(image).attr('src', images[i]);
} else {
i = 0;
$(image).attr('src', images[i]);
}
}, 1500);
EDIT: I managed to get one part of this working. CHECK THIS.Just need to add fade effect Now the problem is after the images in the array end the first images dont loop back... Had not thought of this before.Does Anybody know how i can get over this issue?

Mabye something like this:
jQuery(document).ready(function () {
var images = [];
var loop;
var i = 0;
images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87";
images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw";
images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ";
$('img', '.maindiv').mouseover(function () {
//Get divs inside main div and reverse them, so right is first
var divs = $($('div','.maindiv').get().reverse());
//Set up loop
loop = setInterval(function(){
divs.each(function(key, div){
if (divs[key+1])
{
//All divs gets image src from previous div > img
$('img', div).attr('src', $('img', $(divs[key+1])).attr('src'));
}
else
{
//This is left div
if (images && images[i])
{
//If picture url not in array then add it
if ($.inArray($('img', div).attr('src'), images) == -1)
{
images.push($('img', div).attr('src'));
}
$('img', div).attr('src', images[i]);
i++;
if (i>= images.length) i = 0;
}
}
});
}, 1500);
}).mouseout(function(){
clearInterval(loop);
});
});
Fiddle

How to make an image slider in javascript

I am implementing an image slider in javascript/jquery.
The demo should work like this.
http://londatiga.net/tutorials/scrollable/
Anyway I don't won't to rely on jquery.tools.min.js because this lib is out of date (the last update is about 8 months ago ).
I decide to make the js code by me.
When clicking on next or prev button I would like to shift the images on the list of one item/image.
The script shifts the items but the display is quite crappy, because the next items is not displayed.
The list is made of 4 images. At the beginning only the first two images are displayed, then when clicking on the next button I would like to display the second and the third image.
Actually the script shows just the first and the second image even if I click on the next button.
Here is the demo: http://jsfiddle.net/xRQBS/5/
Here is the code (1)
Any hints how should I fix it?
thanks
(1)
/*global jQuery */
(function ($) {
var imgs = [
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X'
];
var $list = $('.list-images');
var $slider = $('.slider');
var slideImage = function (direction) {
var unit = 150;
var left = parseInt($slider.attr('left'), 10) || 0;
left = (direction === 'prev') ? left - 150 : left + 150;
$slider.css('left', left + 'px');
};
$(function () {
$.each(imgs, function (i, img) {
$list.append($('<li>').append($('<img>').attr('src', img)));
});
$('body').on('click', '.direction', function () {
slideImage($(this).attr('data-tid'));
});
});
}(jQuery));
​

With the animate function:
$slider.animate({'left': left + 'px'}, 1000);
http://jsfiddle.net/xRQBS/6/

I'm assuming that you want the shift to be more of an animation. If so, take a look at jQuery's animate. Something like this:
$slider.animate({left: left + 'px'});
That will give it a sliding effect, which what I'm assuming you want :)

Jquery Slideshow load random random image order

I have a simple Jquery slideshow, that fades a list of images one after the other.
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(3000)
.next('img').fadeIn(3000)
.end().appendTo('.fadein');},
3000);
});
</script>
What I want to do now is to make them randomized. As this slideshow is in the header of my page, every time a user navigates to a different page the slideshow starts from the beginning again.
I want to make it so that the images show in random order.
Any help would be great!

try with this logic
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />
or try with this function
$.fn.randomImage = function (){
var $imageNumber = 8,
// Set the amount of images in the Sprite
$height = $('> div', this).innerHeight(),
$random_num = Math.random() * $imageNumber - 1,
$multiple = Math.round($random_num),
$random = $height * $multiple
jQuery('.image').css(
{'background-position' : '0px -' + $random + 'px', 'display' : 'block' }
)};
and then
jQuery('#image-container').randomImage();
Reference
random images
another

The jQuery plugin I found at http://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js
might do the trick. It shuffles all the elements selected. There's also a demo here: http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html.
Usage is like $('#imagediv').shuffle();