• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Backstretch Slideshow?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Backstretch Slideshow?

This topic is: not resolved

Tagged: Agentpress Pro, backstretch, css, js, php, responsive, slideshow

  • This topic has 9 replies, 3 voices, and was last updated 8 years, 6 months ago by gdailey.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 8, 2014 at 8:39 am #123365
    Tom
    Member

    Hi all,

    I was following one of Brad Dalton's tutorials over at wpsites.net. I wanted to have a Slideshow Background on the AgentPress Pro Theme, I noticed three Backstretch .js files are already included with AgentPress Pro.
    Does anyone know how I can adapt this to display a Slideshow with 3 or 5 images? I know this can be done with a plugin, but would like to learn how to code this into a theme instead 🙂

    Auto Resize Background Images With BackStretch by Brad Dalton
    http://wpsites.net/web-design/resize-background-images/

    Tom

    September 9, 2014 at 8:43 am #123572
    Tom
    Member

    Anyone done anything similar before?

    September 9, 2014 at 8:49 am #123575
    Genesis Developer
    Member

    Every page & post images will change? Or you're wanting a slideshow which will work on whole site?


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    September 9, 2014 at 8:55 am #123580
    Genesis Developer
    Member

    are you wanting this http://demo.pwdtechnology.com/think/? From layout selector you'll choose the BOXED option and see the demo


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    September 9, 2014 at 9:00 am #123581
    Genesis Developer
    Member

    this plugin "Background Manager" will be suitable for you


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    September 9, 2014 at 9:28 am #123586
    Tom
    Member

    Thank you, I would like to stay away from using a plugin for this if possible. I found this tutorial which I think is quite relevant to what I would like to do on the AgentPress Pro Theme (http://bradpotter.com/genesis-sixteen-nine-theme-with-a-backstretch-slideshow/)

    September 9, 2014 at 9:33 am #123587
    Genesis Developer
    Member

    Yes. Correct. You can use Brad Potter code for your site.


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    September 13, 2014 at 4:44 pm #124280
    Tom
    Member

    Just to expand on this topic, after some further research I have added slideshow functionality with Backstretch. Now, I am curious as by default I thought the slideshow should repeat from background images 1 > 4

    Would anyone happen to know what to to add and where for this to take affect? Here is the code and relevant files below:

    functions.php

    function es_enqueue_scripts() {
    //* Load scripts only on home page, to enable on all pages remove the if is_home line and last line from the script
    
    if ( is_home() ) {
    
    wp_enqueue_script( 'es-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'es-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'es-backstretch' ), '1.0.0' );
    wp_localize_script( 'es-backstretch-set', 'BackStretchImg', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg1.jpg' ) );
    wp_localize_script( 'es-backstretch-set', 'BackStretchImg2', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg2.jpg' ) );
    wp_localize_script( 'es-backstretch-set', 'BackStretchImg3', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg3.jpg' ) );
    wp_localize_script( 'es-backstretch-set', 'BackStretchImg4', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg4.jpg' ) );
    
    }
    }

    front-page.php Is this code required in the front-page.php file? As I believe it is actioned in functions.php by if ( is_home() )

    //* Enqueue Backstretch scripts
    	wp_enqueue_script( 'agentpress-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
    	wp_enqueue_script( 'agentpress-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agentpress-backstretch' ), '1.0.0' );
    
    	wp_localize_script( 'agentpress-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_option( 'agentpress-home-image' ) ) ) );

    backstretch.js

    /*! Backstretch - v2.0.4 - 2013-06-19
    * http://srobbin.com/jquery-plugins/backstretch/
    * Copyright (c) 2013 Scott Robbin; Licensed MIT */
    (function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g){g(b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

    backstretch-set.js Does something need to be added here maybe for the repeat of images?

    jQuery(document).ready(function($) {
    $("body").backstretch([BackStretchImg.src,BackStretchImg2.src,BackStretchImg3.src,BackStretchImg4.src],{duration:1500,fade:750});
    });

    Apologies for all the pasted code...

    September 14, 2014 at 5:46 pm #124421
    Tom
    Member

    Resolved 🙂

    November 18, 2014 at 8:21 am #131992
    gdailey
    Member

    Hey Tom,

    Sorry to revisit a closed thread, but I'm trying to work this out myself. I'm trying to do something similar, conditionally calling Backstretch to run a slideshow on the home page, with just a single image on other pages. How did you manage to get this to execute correctly?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble