I have a list items something like this that has images inisde it
<li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
<div class="bg pg target thumbnail">
<img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
</div>
<div class=" pagination_img">2 de 12</div>
</li>
<li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
<div class="bg pg target thumbnail">
<img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
</div>
<div class=" pagination_img">2 de 12</div>
</li>
<li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
<div class="bg pg target thumbnail">
<img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
</div>
<div class=" pagination_img">2 de 12</div>
</li>
<li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
<div class="bg pg target thumbnail">
<img class="thumb big" data-src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
</div>
<div class=" pagination_img">2 de 12</div>
</li>
After 3rd list element I am adding the url for images in data-src tag .
In the fiddle you can see two button to move next or previous image . So I want to check the Next or Previous 3 images if it has attribut data-src I want to change it to src .If not then do nothing and check the next one .
Here is the working fiddle for it .
If not this method then I am open for any other solution like . Maybe with ajax if I can do that
UPDATE
Here is Another link . In this example I am able to change all the data-src to src once the button is clicked . But I am trying to change only next 3 consecutive images Example Thanks & Regards
Getting the next 3 consecutive images means that a simple slice is not sufficient, because you can reach the end of the image list. The following example should demonstrate this issue:
var imgs = [0, 1, 2, 3, 4, 5], // every number stands for an image
currentIndex = 3;
// For getting the next three images a simple slice is not enough:
var result = imgs.slice(currentIndex+1, currentIndex+1+3);
console.log(result); // result is [4, 5]
So at the border of an array you need a combination of two calls of the function slice.
A jQuery solution for your problem could then be coded like this:
/**
* Find the previous elements and jump to the beginning of the list, if no more
* elements are available at the right side of the list
*
* @param {Object} $elements A jQuery object with the elements
* @param {Number} index The current index
* @param {Number} num The number of elements to return
*
* @return {Object} A jQuery object with the found elements
*/
function next($elements, index, num) {
// first try to slice enough elements (a maximum of num)
// of the right side of the index
var $found = $elements.slice(index+1, index+1+num),
diff = num - $found.length;
// if there are not enough elements make a second slice
// at the beginning of the array
if(diff) {
$found = $found.add($elements.slice(0, diff));
}
return $found;
};
/**
* Find the previous elements and jump to the end of the list, if no more
* elements are available at the left side of the list
*
* @param {Object} $elements A jQuery object with the elements
* @param {Number} index The current index
* @param {Number} num The number of elements to return
*
* @return {Object} A jQuery object with the found elements
*/
function prev($elements, index, num) {
// first try to slice enough elements (a maximum of num)
// of the left side of the index
var $found = $elements.slice(Math.max(index-num, 0), Math.max(index, 0)),
diff = num - $found.length;
// if there are not enough elements make a second slice
// at the end of the array
if(diff) {
$found = $found.add($elements.slice($elements.length - diff));
}
return $found;
};
/**
* A helper function for choosing between next and prev
* on the basis of the direction
*
* @param {Object} $elements A jQuery object with the elements
* @param {Number} index The current index
* @param {Number} num The number of elements to return
* @param {Number} direction The direction to search for elements
* 1 stands for forwards and -1 for backwards
*
* @return {Object} A jQuery object with the found elements
*/
function nextOrPrev($elements, index, steps, direction) {
var func = direction === 1 ? next : prev;
return func($elements, index, steps);
}
To get this working with your example you must keep track of the current index and the direction. Since you are using the plugin responsiveSlides you can do this like this:
var lastIndex = 0,
index = 0,
direction = 1,
$lis = $(".rslides li"),
len = $lis.length;
$("#slider1").responsiveSlides({
startidx: 0,
auto: false,
pager: true,
nav: true,
speed: 500,
maxwidth: 540,
namespace: "transparent-btns",
before: function(i) {
// there is a bug that the index is sometimes -1, here is the fix:
if(i < 0) {
i = len + i;
}
lastIndex = index;
index = i;
direction = (lastIndex+1)%len === index ? 1 : -1;
}
});
The last thing you have to do is to replace the line
$lis.each(function(i, n) {
with this line:
nextOrPrev($lis, lastIndex, limit, direction).each(function(i, n) {
Here is the complete jsfiddle-example