Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1
    Join Date
    Oct 2011
    Location
    Vancouver, WA
    Posts
    73

    Default Full width header image cycle on refresh

    Does anyone know how to make a "full width stretchy image" cycle between 3 or 4 images on page refresh? The site is here: AC GENERAL CONTRACTING

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    37,388

    Default Re: Full width header image cycle on refresh

    I don't but I bet one of the members will have a script you can use. FWIW I refreshed the link you posted and nothing changes. I am using Firefox. This might be different with Chrome. I just looked with Edge and same. No change. Same with Brave which I think may be a Chrome offshoot.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    10,118

    Info Re: Full width header image cycle on refresh

    Quote Originally Posted by edmiston99 View Post
    Does anyone know how to make a "full width stretchy image" cycle between 3 or 4 images on page refresh? The site is here: AC GENERAL CONTRACTING
    Your ask is confusing, What is page refresh need for? Are you after a toggle between 3 and 4 images or is this just your limit?

    Here is something that I hope is what you are after: CSS-JS - Smple Carousel - Stretchy Width.xar.

    Each image has a special Name. of htmlclass="illy"
    Each image is scale-stretched central full width.
    The Placeholder must be somewhere in the Page background.
    It is set for a second Fade In, 8 second display and a second Fade Out; if you want different values, the code is in the Placeholder body and the timings are in milliseconds.

    Acorn
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

  4. #4
    Join Date
    Oct 2011
    Location
    Vancouver, WA
    Posts
    73

    Default Re: Full width header image cycle on refresh

    Quote Originally Posted by gwpriester View Post
    I don't but I bet one of the members will have a script you can use. FWIW I refreshed the link you posted and nothing changes. I am using Firefox. This might be different with Chrome. I just looked with Edge and same. No change. Same with Brave which I think may be a Chrome offshoot.
    Yeah, the one I have now doesn't change on refresh. It won't until I find a method that will work.

  5. #5
    Join Date
    Oct 2011
    Location
    Vancouver, WA
    Posts
    73

    Default Re: Full width header image cycle on refresh

    Quote Originally Posted by Acorn View Post
    Your ask is confusing, What is page refresh need for? Are you after a toggle between 3 and 4 images or is this just your limit?

    Here is something that I hope is what you are after: CSS-JS - Smple Carousel - Stretchy Width.xar.

    Each image has a special Name. of htmlclass="illy"
    Each image is scale-stretched central full width.
    The Placeholder must be somewhere in the Page background.
    It is set for a second Fade In, 8 second display and a second Fade Out; if you want different values, the code is in the Placeholder body and the timings are in milliseconds.

    Acorn
    Essentially, I want a different header picture on the home page with every page view regardless of if it's a subsequent visit, or if visitors are perusing the site, and end up back on the home page. A different picture than the last time they were there, or at least likely different. Occasionally different?

  6. #6
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    605

    Default Re: Full width header image cycle on refresh

    A carousel that starts with a random picture rather than sequential would give the effect you're looking for. I'm pretty sure some commercial slider software do it, Amazing Slider, Hi Slider and CoffeeCup spring to mind but it's been a few years since I was playing with them.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    10,118

    Default Re: Full width header image cycle on refresh

    Quote Originally Posted by edmiston99 View Post
    Essentially, I want a different header picture on the home page with every page view regardless of if it's a subsequent visit, or if visitors are perusing the site, and end up back on the home page. A different picture than the last time they were there, or at least likely different. Occasionally different?
    Here is a simple approach.

    I have added a random element to my Simple Carousel Widget.
    1. You you need to do is place the Widget on the page.
    2. Place a number of images, shapes or text on the page and add a special Name of htmlclass="illy" to them.
    3. If you are after a full width carousel, then add stretch to the images. Shapes work too, as in my demo, you could stretch the characters, noting them are Shapes not Text as text will not stretch.

    Each visit to the holding page returns a random image. If you are "unlucky", it could be the same image several times but for 3 to 4 images this is quite likely.

    After the image is shown for 8 seconds, another is picked and so you get a random carousel.
    If you only every want one image, increase the 8 seconds to a stupidly large number: 300000 milliseconds (five minutes).

    JS - Random Carousel.xar.


    Placeholder HTML Body (code):
    Code:
    <script>
    $(document).ready(function(){
    
    
    (function fade(idx) {
      var $illy = $('.illy');
      $illy.hide();
      idx = Math.floor(Math.random() * $illy.length);
      $illy.eq(idx).fadeIn(1000).delay(8000).fadeOut(1000, function () {
        fade(idx + 1 < $illy.length ? idx + 1 : 0);
      });
    }(0));
    
    
    });
    
    
    </script>
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

  8. #8
    Join Date
    Oct 2011
    Location
    Vancouver, WA
    Posts
    73

    Default Re: Full width header image cycle on refresh

    Quote Originally Posted by Acorn View Post
    Here is a simple approach.

    I have added a random element to my Simple Carousel Widget.
    1. You you need to do is place the Widget on the page.
    2. Place a number of images, shapes or text on the page and add a special Name of htmlclass="illy" to them.
    3. If you are after a full width carousel, then add stretch to the images. Shapes work too, as in my demo, you could stretch the characters, noting them are Shapes not Text as text will not stretch.

    Each visit to the holding page returns a random image. If you are "unlucky", it could be the same image several times but for 3 to 4 images this is quite likely.

    After the image is shown for 8 seconds, another is picked and so you get a random carousel.
    If you only every want one image, increase the 8 seconds to a stupidly large number: 300000 milliseconds (five minutes).

    JS - Random Carousel.xar.


    Placeholder HTML Body (code):
    Code:
    <script>
    $(document).ready(function(){
    
    
    (function fade(idx) {
      var $illy = $('.illy');
      $illy.hide();
      idx = Math.floor(Math.random() * $illy.length);
      $illy.eq(idx).fadeIn(1000).delay(8000).fadeOut(1000, function () {
        fade(idx + 1 < $illy.length ? idx + 1 : 0);
      });
    }(0));
    
    
    });
    
    
    </script>
    I think this on just might do it. I assume you just stack the images on top of each other?

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    10,118

    Default Re: Full width header image cycle on refresh

    Quote Originally Posted by edmiston99 View Post
    I think this on just might do it. I assume you just stack the images on top of each other?
    As you are stretching them, ideally all that is needed is they are the same height and aligned vertically.
    If you apply Full Width & Scaled to my example file, you will get giant letter fragments but each is now fully stretched the width of the browser. It is clearer with images but I considered the file size of the example should be kept small.

    Acorn
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

  10. #10
    Join Date
    May 2002
    Location
    Canada
    Posts
    2,384

    Default Re: Full width header image cycle on refresh

    I used them for a client but now I wonder if websites created in 2020 will need header sliders. They just slow down the site to me. A nice picture will do the job.
    www.designfacet.com
    Owner/Creative Director at DesignFacet

    Xara Designer Pro



 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •