Fullscreen Background Galery (Backstretch)

typo3.ts

page.includeJSFooter.file23456 = fileadmin/templates/js/backstretch/jquery.backstretch.min.js
page.includeJS.file002 >

page.jsFooterInline {
  10 = COA
  
  10.10 = CONTENT 
  10.10.wrap = var images = [ | ];
  10.10 {
    table = tt_content
    select {
      where = colPos=0
      max = 1
      #orderBy = sorting ASC
    }
    renderObj=COA
    renderObj {
      10=TEXT  
      10 {
        required=1
        #wrap=|
        field=image
        width = 1080c
      }
      stdWrap.split { 
        token = ,
        wrap = "uploads/pics/|", |*| "uploads/pics/|", |*| "uploads/pics/|"
      }
    }
    
  }
   
  10.11 = CONTENT 
  10.11.wrap = var captions = [ | ];
  10.11 {
    table = tt_content
    select {
      where = colPos=0
      max = 1
      #orderBy = sorting ASC
    }
    renderObj=COA
    renderObj {
      10=TEXT  
      10 {
        required=1
        #wrap=|
        field=imagecaption
        #width = 1080c
      }
      stdWrap.split { 
        token.char = 10
        wrap = "|", |*| "|", |*| "|"
      }
    }
    
  }
  
  
  10.12 = CONTENT 
  10.12.wrap = var titles = [ | ];
  10.12 {
    table = tt_content
    select {
      where = colPos=0
      max = 1
      #orderBy = sorting ASC
    }
    renderObj=COA
    renderObj {
      10=TEXT  
      10 {
        required=1
        #wrap=|
        field=titleText
        #width = 1080c
      }
      stdWrap.split { 
        token.char = 10
        wrap = "|", |*| "|", |*| "|"
      }
    }
    
  }
  
  10.13 = CONTENT 
  10.13.wrap = var links = [ | ];
  10.13 {
    table = tt_content
    select {
      where = colPos=0
      max = 1
      #orderBy = sorting ASC
    }
    renderObj=COA
    renderObj {
      10=TEXT  
      10 {
        required=1
        #wrap=|
        field=image_link
        #width = 1080c
      }
      stdWrap.split { 
        token.char = 10
        wrap = "|", |*| "|", |*| "|"
      }
    }
    
  }
  
  10.20 = TEXT
  10.20.value (
  
  function fillInfoBox ( title, caption, link ) {
    jQuery(".boxbighome").replaceWith('<div class=\"boxbighome\"><h1><a href="index.php?id='+link+'">'+title+'</a></h1><p>'+caption+'</p></div>');
  }
  
  $(images).each(function(){
           $('<img/>')[0].src = this; 
        });
        
        // The index variable will keep track of which image is currently showing
        var index = 0;
        
        // Call backstretch for the first time,
        // In this case, I'm settings speed of 500ms for a fadeIn effect between images.
        $.backstretch(images[index], {speed: 500});
        fillInfoBox ( titles[index], captions[index], links[index] );
        // Set an interval that increments the index and sets the new image
        // Note: The fadeIn speed set above will be inherited
  
        function interval() {
            index = (index >= images.length - 1) ? 0 : index + 1;
            $.backstretch(images[index]);
            fillInfoBox ( titles[index], captions[index], links[index] );
        }
  
        var si = setInterval(interval, 6000);
        

        jQuery(window).load(function(){
    jQuery("#next").click(function(){
            //console.log('next');
      index = (index >= images.length - 1) ? 0 : index + 1;
                clearInterval(si);
                $.backstretch(images[index]);
                si = setInterval(interval, 6000);
                fillInfoBox ( titles[index], captions[index], links[index] );
    });
          jQuery("#prev").click(function(){
            //console.log('next');
      index = (index == 0) ? images.length - 1 : index - 1;
                clearInterval(si);
                $.backstretch(images[index]);
                si = setInterval(interval, 6000);
                fillInfoBox ( titles[index], captions[index], links[index] );
    });
   });
  )
  
}