Question

I have to many same functions running on my site

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x1"> 

<ul class="gallery clearfix">

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 
<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 



<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>
</ul> 
</section> 
</section> 

and and and …

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x2"> 

<ul class="gallery clearfix">

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 
<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 


<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li> 



<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>

<li class="g2">
    <a href="#">
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif">
    </a>
</li>
</ul> 
</section> 
</section> 

and my same function too

function scrollToPositionx1(element) {
    if (element !== undefined) {
        $(".x1").scrollTo(element, 800, {
            margin: true
        });
    }
}

$(function() {

    //Create an Array of posts
    var posts = $('.x1 img');
    var position = 0; //Start Position
    var next = $('.x1 #next');
    var prev = $('.x1 #prev').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPositionx1(posts[position += 1]);
        if (position === posts.length - 6) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPositionx1(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});

and and and …

function scrollToPositionx2(element) {
    if (element !== undefined) {
        $(".x2").scrollTo(element, 800, {
            margin: true
        });
    }
}

$(function() {

    //Create an Array of posts
    var posts = $('.x2 img');
    var position = 0; //Start Position
    var next = $('.x2 #next');
    var prev = $('.x2 #prev').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPositionx2(posts[position += 1]);
        if (position === posts.length - 6) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPositionx2(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});

it different only X1, X2, … and more

Any way to short code my same functions ?

Live demo : http://jsfiddle.net/G3ERL/

Answer 1

I think you should just use http://jquery.malsup.com/cycle/nest2.html

and just use http://jquery.malsup.com/cycle/ and its bug free and many more people contribute to bug fixes 🙂

nearly forgot, its always reusable lol 🙂 unlike ur functions 🙂