Announcement

Collapse
No announcement yet.

Rotating Banner

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Rotating Banner

    I use a 70 / 30 layout and would like to add a module on the 30 side that rotates random images. I read about using php to accomplish this, but is there an easier way for non-technical users?

    #2
    You can use pure Javascript to do it. You just have to hardcode in the script the URLs of all the possible images you want to display.

    See below sample script I just did for you. You can use a Static HTML module for this.

    HTML Code:
    <img id="rotateImage" src="https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154" />
    <script>
    (function() {
        var bannerImages = [
                "https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154",
                "https://vbmods.rocks/filedata/fetch?id=6964&d=1508045443",
                "https://vbmods.rocks/filedata/fetch?id=6968&d=1508057279" /* no trailing comma at the last element */
            ],
            image = document.getElementById('rotateImage');
    
        function rotateImage() {
            var index = Math.floor(Math.random() * bannerImages.length);
            image.src = bannerImages[index];
        }
    
        window.setInterval(rotateImage, 1000); //1000 (msec) = 1 sec (adjust as needed)
    
    })();
    </script>
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      This works great Glenn. I have 3 images with different url's that I want to open in a new window when clicked. I can get the first image to open the link, but wan't sure how to configure the other images to do the same.

      Comment


        #4
        This is really what I'd like to accomplish in a module but the scripted method to open each linked image does the job. Just curious, any idea what it would take to make it look like this?
        Click image for larger version  Name:	image.png Views:	1 Size:	573.3 KB ID:	6992

        Comment


          #5
          What I showed you was a just a simple rotating banner script that I quickly created as a kind of prototype. If you want a full-featured script, then you'd have to find one or use the one that the Content Slider module uses which is https://www.jssor.com. But it will not be easy for non-technical users to implement.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            Thanks for your help Glenn. Enjoy a coffee!

            Comment


              #7
              Thanks!
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                I can't seem to get it to work with linked images. Why doesn't it work by pre-populating the link in bannerImages?

                <img id="rotateImage" src="http://mysite.com' target="_blank"><img src='https://mysite.com/fa2559af99820075c7b8" />

                <script>

                (function() {

                var bannerImages = [

                "<a href = "http://mysite.com' target="_blank"><img src="https://mysite.com/fa2559af99820075c7b8"></a>",
                "<a href = "http://mysite.com/help" target="_blank"><img src="https://mysite.com/46c7969d548125d7e658"></a>",

                ],

                image = document.getElementById('rotateImage');

                function rotateImage() {

                var index = Math.floor(Math.random() * bannerImages.length);

                image.src = bannerImages[index]; }

                window.setInterval(rotateImage, 1000);

                })();

                </script>

                Comment


                  #9
                  I created a simple rotating banner script at https://vbmods.rocks/forum/vbulletin...-banner-script
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #10
                    Always appreciate the help here! Your example is a template for how it should look. Hopefully others find it useful too

                    Comment

                    Users Viewing This Page

                    Collapse

                    There is 1 user viewing this forum topic.

                    • Guest Guest

                    Latest Posts

                    Collapse

                    Working...
                    X
                    Searching...Please wait.
                    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                    Please push the back button and reload the previous window.'
                    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                    Please push the back button and reload the previous window.'
                    An internal error has occurred and the module cannot be displayed.
                    There are no results that meet this criteria.
                    Search Result for "|||"