function galleryViewWithCarousel(display){
$(document).ready(function(){


/* Structure of the gallery
outer  
panel   Div to be displayed (used to display a part of the images)
inner   Div containing all the images. this div will be moved in panel div
imgbox  Div containing single image
image   Image to be moved
*/  

    display = display;                         // Set number of images to be displayed
    var setAutoScroll = true;
    var rotateTimer = 4500;
    var resumeTimer = 1500;
    var inOutTimer = 1500;
    var scrollTimer = inOutTimer * 2;
    var arrowOpacity = 0.4;
    var y=0;                                 // Set the position of frame to zero


                                          
    var imageCount = $(".inner img").size(); // Total number of images
    
    if(imageCount<display){
        display = imageCount;
    }    
    
    var difference = imageCount - display;   // Get number of images to be removed

    var boxDiv = $(".imgbox");
    var boxWidth = boxDiv.width();
        boxWidth += parseInt(boxDiv.css("padding-left"), 10) + parseInt(boxDiv.css("padding-right"), 10); //Total Padding Width
        boxWidth += parseInt(boxDiv.css("margin-left"), 10) + parseInt(boxDiv.css("margin-right"), 10); //Total Margin Width
        boxWidth += parseInt(boxDiv.css("borderLeftWidth"), 10) + parseInt(boxDiv.css("borderRightWidth"), 10); //Total Border Width
        
    var innnerDiv = $(".inner");

    var innnerPadding = parseInt(innnerDiv.css("padding-left"), 10) + parseInt(innnerDiv.css("padding-right"), 10); //Total Padding Width
    var innnerMargin = parseInt(innnerDiv.css("margin-left"), 10) + parseInt(innnerDiv.css("margin-right"), 10); //Total Margin Width
    var innnerBorder = parseInt(innnerDiv.css("borderLeftWidth"), 10) + parseInt(innnerDiv.css("borderRightWidth"), 10); //Total Border Width
    var innerTotal = innnerPadding + innnerMargin + innnerBorder;

    var panelWidth = (display*boxWidth)+innerTotal;             // Calculate the width of the panel i.e. number of images multipy by total space of images

    var bigimageWidth = $(".bigimage").css("width");    // Get the width of big image
    var bigimageHeight = $(".bigimage").css("height");  // Get the height of big image
    //var count = panelwidth/innerwidth;                  // Count for 

    var x;
            
    
    $(".panel").css("width",panelWidth);                     // Set the width of the panel
    //alert(firstImage);
       
 
    //Hide Arrows if lesser images
    if(difference==0){
        $(".btn1").css("display","none"); 
        $(".btn2").css("display","none");       
    }
    
    //Prevent anchor on thumbnails
    $('.inner a').click(function(e) {                   // Disable the anchor attribute on images
        e.preventDefault();
    });
        
    //Load first Image with the big image
    var firstImage = $(".inner .imgbox img").attr("src");// Get the source of first Image in the panel
    var firstLink = $(".inner a").attr("href");
    var firstTitle = $(".inner .imgbox img").attr("alt");
    var replacevar = 'thumbs/thumbs_';                   // Replace the thumbnail path with the image path  //For NGG gallery only
    var sRegExInput = new RegExp(replacevar, "g"); 
    firstImage = firstImage.replace(sRegExInput, ''); //
    $(".inner img:first").addClass("thumb-active");       // Add the first Image as active image
    $(".bigimage").html("<a href='" + firstLink + "' >" + "<img src='" + firstImage + "'/>"  + "</a>"); // Pass the firts image in the big image
    $(".title").html(firstTitle);
    
    //$(".play").css("opacity",1);
    
    //Left Arrow Function
    $(".btn1").click(function(){                        // Set the click button for scrolling
        //y = getImageIndex();
        var currimage = getImageIndex();
        if(currimage > 0){
            changeBigImage('left');
        }
        if(y>0){
            //if(y==1){$(".btn1").css("opacity",arrowOpacity)}
            $(".btn2").css("opacity",1)
            y--;
            changeBigImage('left');
            x=-boxWidth*y+"px";
            $(".inner").animate({left:x});
        }
    });
    

    
    if(y==0){$(".btn1").css("opacity",arrowOpacity)}
    if(y==imageCount){$(".btn1").css("opacity",arrowOpacity)} 
    
    //Right Arrow Function    
    $(".btn2").click(function(){
       // y = getImageIndex();

        $(".btn1").css("opacity",1)
        var currimage = getImageIndex();
        if(currimage < imageCount){
            changeBigImage('right');
        }
        if(y<difference){
           // if(y==difference-1){$(".btn2").css("opacity",arrowOpacity)} 
            y++;
            changeBigImage('right');
            x=-boxWidth*y+"px";
            $(".inner").animate({left:x});
        };
    });
      
    // View Big Image Function
    $(".inner img").click(function(){

        //thumb to image
        var getThumbSrc = $(this).attr("src");
        var getImageSrc = thumbToImage(getThumbSrc);
        
        //link       
        var url = $(this).parent().attr("href");
        //title
        var title = $(this).attr("alt");
        //index
        var thumbIndex = getThumbIndex($(this));
        
        
        $(".bigimage").fadeOut(inOutTimer,function(){
            $(".bigimage").html("<a href='" + url + "'>" + "<img src='" + getImageSrc + "' id='bigimage-" + thumbIndex + "'/>" + "</a>").fadeIn(inOutTimer);
        });
        
               
        $(".title").html(title);
       
        $(".inner img").removeClass("thumb-active");
        $(this).addClass("thumb-active");

    });
    
    
    
    //Auto Scroll when page loads
    if(setAutoScroll == true){
        setTimeout('scrollAuto( 0, '+ boxWidth +', '+ imageCount +', '+ display +', '+ rotateTimer +', '+ inOutTimer +', '+ scrollTimer +' )',rotateTimer);
        $('a.play').html('Pause Slideshow');
    }
    
  //Set play, pause and resume button
    $('a.play').click(function(){
       if($(this).html()=='Start Slideshow'){
           $(this).html('Pause Slideshow');
           setTimeout('scrollAuto( 0, '+ boxWidth +', '+ imageCount +', '+ display +', '+ rotateTimer +', '+ inOutTimer +', '+ scrollTimer +' )',resumeTimer);
       } 
       else if ($(this).html()=='Pause Slideshow'){
        $('*').clearQueue();
        setTimeout(function(){ $('a.play').html('Resume Slideshow'); },inOutTimer);
       } 
       else {
           $(this).html('Pause Slideshow');
           var imageIndex = getImageIndex();
           setTimeout('scrollAuto( ' + imageIndex + ', '+ boxWidth +', '+ imageCount +', '+ display +', '+ rotateTimer +', '+ inOutTimer +', '+ scrollTimer +' ) ',resumeTimer);
       }
    });
    
    
    //Pause gallery when we click on arrows or image
    $(".btn1").click(function(){
        $('*').clearQueue();
        if($('a.play').html()=='Pause Slideshow'){ $('a.play').html('Resume Slideshow'); }
    });
    $(".btn2").click(function(){
        $('*').clearQueue();
        if($('a.play').html()=='Pause Slideshow'){ $('a.play').html('Resume Slideshow'); }
    });
    $(".inner img").click(function(){
        $('*').clearQueue();
        if($('a.play').html()=='Pause Slideshow'){ $('a.play').html('Resume Slideshow'); }
    });
  
  
    
    var i = 0;
    image_src_array = new Array();
    thumb_src_array = new Array();
    preload_image_object = new Image();
    for(i=0;i<=display;i++){
        var getThumbSrc = $(".inner .imgbox img:eq(" + i + ")").attr("src");
        var getImageSrc = thumbToImage(getThumbSrc);
        image_src_array[i] = getImageSrc;
        thumb_src_array[i] = getThumbSrc;
     }
     for(i=0; i<=display; i++){
         preload_image_object.src = image_src_array[i];
     }
});
}
  


function scrollAuto( y, boxWidth, imageCount, display, rotateTimer, inOutTimer, scrollTimer ){
    if(!($('a.play').html()=='Pause Slideshow')){
        stopPropagation();
    }
    y = y + 1;
    boxWidth = boxWidth;
    
    //Set variables for Carousel animate condition 
    var center = Math.round(display/2);
    var startCarousel = center;
    var stopCarousel = imageCount-center;
    
    
    // Pass big image with its index, title and anchor
    //title
    var getTitle = $(".inner .imgbox img:eq(" + y +")").attr("alt");    
    //anchor
    var getImageLink = $(".inner .imgbox a:eq(" + y +")").attr("href");
    //thumb index        
    var thumbIndex = getThumbIndex($(".inner .imgbox img:eq(" + y +")"));
    //image source     
    var getThumbSrc = $(".inner .imgbox img:eq(" + y +")").attr("src");// Get the source of first Image in the panel
    var getImageSrc = thumbToImage(getThumbSrc);
    
    //Active Class
    setTimeout(function (){ 
        $(".inner .imgbox img").removeClass("thumb-active");
        $(".inner .imgbox img:eq(" + y +")").addClass("thumb-active");       // Use this line for adding selected class
    },inOutTimer)
    
    //Replace bigimage with new
    $(".bigimage").fadeOut(inOutTimer,function(){
        $(".bigimage").html("<a href='" + getImageLink + "' >" + "<img id='bigimage-"+ thumbIndex + "' src='" + getImageSrc + "'/>" + "</a>").fadeIn(inOutTimer);
    });

    // Change title
    $(".title").html(getTitle);
    var imageCount = $(".inner .imgbox").size();
    
    // Carousel animate condition
    if(( y >= startCarousel) && (y <= stopCarousel) && (display <  imageCount) ){    
        var c = y - (center - 1);
        var l=-boxWidth*c+"px";
        $(".inner").animate({left:l},scrollTimer);       
    }

    //Callback function
    if(y < imageCount){
        if(!($('a.play').html()=='Pause Slideshow')){
            stopPropagation();
        } else {
            setTimeout('scrollAuto( ' + y + ', '+ boxWidth +', '+ imageCount +', '+ display +', '+ rotateTimer +', '+ inOutTimer +', '+ scrollTimer +' ) ',rotateTimer);
        }
    }
     
     
    // Return to first image after completion 
    if (y == imageCount -1 ) {
        setTimeout(function (){ 
            $(".inner").animate({left:'0px'},scrollTimer);
            $(".inner .imgbox img").removeClass("thumb-active");
            $(".inner .imgbox img:eq(0)").addClass("thumb-active");
            //$(".play").css("opacity",1);
            $(".play").html("Start Slideshow");
            var getThumbSrc = $(".inner .imgbox img:eq(0)").attr("src");// Get the source of first Image in the panel
            var getImageLink = $(".inner .imgbox a:eq(0)").attr("href");
            var getImageSrc = thumbToImage(getThumbSrc);
            //$(".inner .imgbox img:eq(" + y +")").addClass("thumb-active");       // Use this line for adding selected class
            $(".bigimage").fadeOut(inOutTimer,function(){
                $(".bigimage").html("<a href='" + getImageLink + "' >" + "<img src='" + getImageSrc + "'/>" + "</a>").fadeIn(inOutTimer);
            });        
        },rotateTimer);
    }
}

// Function to get the index of image
function getImageIndex(){
    var imgboxid=$('.bigimage img').attr('id');
    var replacevar='bigimage-';
    var sRegExId = new RegExp(replacevar, "g"); 
    imgboxid = imgboxid.replace(sRegExId, '');
    return imgboxid;
}

// Function to get the index of thumb
function getThumbIndex(selector){ 
    var imgboxid=selector.attr('id');
    var replacevar='imgbox-';
    var sRegExId = new RegExp(replacevar, "g"); 
    imgboxid = imgboxid.replace(sRegExId, '');
    return imgboxid;
}

//Function to get image path from thumbnail path    //for NextGen Gallery
function thumbToImage(thumbLink){
    var replacevar='thumbs/thumbs_';
    var sRegExId = new RegExp(replacevar, "g"); 
    imageLink = thumbLink.replace(sRegExId, '');
    return imageLink;
}

function changeBigImage(direction){
    // View Big Image Function
    index = getImageIndex();
    
    var inOutTimer = 1500;   
    if(direction == 'right'){
        index = parseInt(index) + parseInt(1);
    } else { 
        index = index - 1;
    }

    //thumb to image
    var selector = $(".inner .imgbox img:eq(" + index + ")");
    var getThumbSrc = selector.attr("src");
    var getImageSrc = thumbToImage(getThumbSrc);
    
    //link       
    var url = selector.parent().attr("href");
    //title
    var title = selector.attr("alt");
    //index
    //var thumbIndex = getThumbIndex(selector);
    
    
    $(".bigimage").fadeOut(inOutTimer,function(){
        $(".bigimage").html("<a href='" + url + "'>" + "<img src='" + getImageSrc + "' id='bigimage-" + index + "'/>" + "</a>").fadeIn(inOutTimer);
    });
    
           
    $(".title").html(title);
   
    setTimeout(function (){ 
        $(".inner .imgbox img").removeClass("thumb-active");
        selector.addClass("thumb-active");       // Use this line for adding selected class
    },inOutTimer)
    
}