Announcement

Collapse
No announcement yet.

Simple Rotating Banner Script

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

    Free Mod Simple Rotating Banner Script

    Below is a simple rotating banner script written in Javascript which you can use in Static HTML Modules or Ad Modules.

    All the banner links and images are hardcoded in the script. If you want them to be dynamic, you can use PHP to generate the links and image sources and then you have to use PHP Module to display them on the page.

    Code:
    <div class="h-align-center">
        <!-- Insert default image and link here -->
        <a id="rotateBannerLink" href="https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front" target="_blank"><img id="rotateBannerImg" src="https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154" alt="" /></a>
    </div>
    <script>
    (function() {
        // list down all possible images and links here
        var bannerImages = [
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154'
                },
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6964&d=1508045443'
                },
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6968&d=1508057279'
                },
                {
                    link: 'https://teespring.com/new-css-puns-wife#pid=369&cid=6513&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/c4I0AwoTTsBkLWC0QyUEmR62_pg/480/560.jpg'
    
                },
                {
                    link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=228&cid=5917&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/C4Evq25AXapV9rSmsd201_V3ht0/480/560.jpg'
                },
                {
                    link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=522&cid=101870&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/_Nb7aR3ULlyR0c6V7N4zZw6ET5w/480/560.jpg'
                } /* no trailing comma here at the last item */            
            ],
            link = document.getElementById('rotateBannerLink'),
            image = document.getElementById('rotateBannerImg');
    
        // function to get a random banner from the list of banners
        function rotateBanner() {
            var index = Math.floor(Math.random() * bannerImages.length);
            image.src = bannerImages[index].src;
            link.href = bannerImages[index].link;
        }
    
        if (link && image) {
            // rotate the banner every 3 seconds
            window.setInterval(rotateBanner, 3000); //1000 (msec) = 1 sec (adjust as needed)
        } else {
            console.log('Error: Link and/or image does not exist. Make sure the <a> and <img> IDs are correct.');
        }
    
    })();
    </script>
    Demo:
    You can find a demo at https://vbmods.rocks/rotating-banner-demo
    Last edited by glennrocksvb; 03-02-2024, 12:07 AM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    If you don't want the images to be randomly displayed and want them to be sequential based on the order in the list, then replace this code:

    Code:
    // function to get a random banner from the list of banners
    function rotateBanner() {
        var index = Math.floor(Math.random() * bannerImages.length);
        image.src = bannerImages[index].src;
        link.href = bannerImages[index].link;
    }
    with:

    Code:
    // function to get the next banner from the list of banners
    var index = 0;
    function rotateBanner() {
        index++;
        if (index === bannerImages.length) {
            index = 0;
        }
        image.src = bannerImages[index].src;
        link.href = bannerImages[index].link;
    }
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      I really like this. This simple script works better for me than the content slider.

      By making multiple images linking to the same featured page I made it meet my needs
      see
      FlipClockFans.com "Featured Flip Clocks"

      Comment


        #4
        Just think of the money I could have saved from buying the photo banner!

        Nice job, Glenn!

        Comment


          #5
          i am logged in i still been asked to login do i need special permission ?

          You need to be logged in to view the code.
          Login
          or
          Register
          now!
          voyger.: In Almighty God I trust, everyone else has to provide evidence."

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            This always happens to me also. I'm logged in but the codes are blocked from the message you got. Try logging out and back in or go to your profile page and then back again. This has been an ongoing hiccup for me as well

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Please try again. Sorry for the inconvenience. This is a known issue here. I'll upgrade soon and hopefully the issue will go away.

          #6
          Originally posted by voyger View Post
          i am logged in i still been asked to login do i need special permission ?

          You need to be logged in to view the code.
          Login
          or
          Register
          now!
          happening with me also

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            This issue is still present

          #7
          silly me done a bodge up need help pleas likely done on my test forum
          what i done did cope the code on first post and paste on html static module now can't let me edit or removed
          glen can you help pleas

          Click image for larger version

Name:	Capture.PNG
Views:	663
Size:	702.7 KB
ID:	11830
          voyger.: In Almighty God I trust, everyone else has to provide evidence."

          Comment


            #8
            You can't click the Pencil icon?
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #9
              i can
              click to the Pencil icon but nothing append is like is lock it i haven/t the option to edit o removed
              voyger.: In Almighty God I trust, everyone else has to provide evidence."

              Comment


                #10
                It looks like you pasted the script in the module title field and not in the module HTML field.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #11
                  yes i did was my mistake pasted in the wrong place is any way how can remove or edit?

                  thanks sorry for the trouble
                  voyger.: In Almighty God I trust, everyone else has to provide evidence."

                  Comment


                    #12
                    Try this. Right-click on the code in the title, then choose Inspect or Inspect element (depending on the browser you use). Then in the highlighted source code, edit the the element (right-click and choose Edit as HTML). Then delete the code in the title. Then try clicking the Pencil icon again.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #13
                      hi glen thanks done it solved you are a live saver thankyou thankyou
                      done as you said above worked thank god for that very happy man today

                      regard
                      voyger.: In Almighty God I trust, everyone else has to provide evidence."

                      Comment


                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        Glad to help!

                      #14
                      Glenn I shot you an email, but maybe it's better to post it here for others. I am using this rotating banner to display some custom calendars that I resell to the board. Is there anything that I can add to the HTML code to prevent it from being copied and pasted?

                      TIA

                      Comment


                        #15
                        I was meaning to respond to your email but got sidetracked with something else and forgot about it. Sorry about that.

                        To answer your question, website owners usually add a script to disable right-click to prevent users to copy the text or images on a page. This is generally frowned upon by the developers and users as it is annoying. Another problem with it is when you right-click, the available options in the context menu are not only for copying so all the context menu options are blocked. And besides, that can be easily bypassed using browser extensions that are available to re-enable right click.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        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 "|||"