Request for a plugin with dynamic scrolling logo carousel

Hi!
My client is looking for this effect for their logos where it will dynamically adjust to the number of rows and columns for the logos using a slider bar below at the same time while scrolling. Would you have any idea if there’s such a plugin or where I should be looking to implement it my own way? Thanks!

Website in question is https://www.ogilvy.com/

  • Kris
    • Support

    Hi Eugene

    Hope you are doing good today.

    I made some research but I could not find any plugin which could manage this. I also review source of this site and it is look like this is some custom code.

    I made additional research and I find this one which change images using range:
    https://stackoverflow.com/questions/43261985/jquery-range-slider-with-image-swap

    Base on that code and with some little changes I was able to get this one:
    https://jsfiddle.net/518ra3pb/

    So base code for head is:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    var cssclass = new Array();
    
            cssclass[0] = 'size01';
    
            cssclass[1] = 'size02';
    
            cssclass[2] = 'size03';
    		
    		cssclass[3] = 'size04';
    		
    		cssclass[4] = 'size05';
           
    $(document).on('input change', '#slider', function() {//listen to slider changes
        var v=$(this).val();//getting slider val
      $("#image_holder").prop("class", cssclass[v]);
    });
    </script>

    Where you can create as many css class you want. Please note this is related to value in html:
    <input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
    Max =5, so range could jump correct.

    Html will look like:

    <input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
    

    <div id="image_holder" class="size01"> <div>your image here</div> <div>your image here</div> <div>your image here</div> <div>your image here</div> <div>your image here</div> <div>your image here</div> <div>your image here</div> </div>

    And you can add multiple images.

    Css will be:

    #image_holder {width:100%; height:90%; overflow:hidden; position:fixed; left:0; bottom:0;}
    #image_holder div img {width:100%; height:100%;}
    #image_holder div {float:left; position:relative; transition: height 0.5s ease, width 0.5s ease;}
    #image_holder.size01 div {width:50%; height:50%;}
    #image_holder.size02 div {width:33%; height:33%;}
    #image_holder.size03 div {width:25%; height:25%;}
    #image_holder.size04 div {width:20%; height:20%;}
    #image_holder.size05 div {width:16.666%; height:16.666%;}

    and of course this an example and you will need to customize it a little bit.

    This is a good start from here to get this done, as such case is a custom work. Of couse you can hire a developer which should be able to make look this better.

    Hope this help :slight_smile:

    Kind Regards,
    Kris

  • Eugene
    • Site Builder, Child of Zeus

    Hi Kris!

    Thank you so much for your super detailed answer!

    I’ve placed the code and tried it on just a simple html page as well as on the wordpress website.

    Currently for the html page, it seems to be working fine. See here – https://bit.ly/2or3bXX

    However, once I tried it on the current wordpress website I would like to do it on, the gif image on top of the banner above doesn’t work.

    See here – https://bit.ly/31c5BXE

    The effect on the banner on another wordpress page can be seen here – https://bit.ly/2nSC3Az

    Are you able to advise what have I done wrong? Or is there a proper folder where I should place my javascript file? I’ve place it in the header as advised for the particular page.

    Do let me know your thoughts. Again Thanks for your super detailed answer!

    Regards,

    Eugene

  • Kris
    • Support

    Hi Eugene

    I’m not sure do I understand this correct. Can you clarify via screenshot where this images slider should be place?

    If below logo and main menu + above main image, this will require some custom work. I’m not sure does this theme allow to add custom html structuture above main image. Possibly you will need to create a child theme and place code in header.php file just right after the header. But this really depend from theme.

    Also one thing I notice is that when you use range main container gets more height if you use it.
    My default code I made was base on first site url you share: https://www.ogilvy.com/
    where this images slider is stick to top of site all the time (position:fixed). In case to use this in the middle of page this will require some additional css, to make main images container static height.

    Kind Regards,
    Kris

  • Kris
    • Support

    Hi Eugene

    If I understand this correct this should look like in below image:

    If so this will require some additional css to move this whole sider up.

    Could you send below data so I could take a closer look on this. Please note I will need to review theme via ftp and see does this will be possible.

    Please send it through our secure contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question and make sure that subject is “I have a different question” and:
    – Mark to my attention: ATTN: Kris Tomczyk

    – Site access:
    — login url
    — username
    — password

    – FTP
    — host
    — username
    — password
    — port

    – Link back to this thread

    Please don’t share any sensitive information (i.e credentials) in the Support Forum, it has public visibility and everyone will have access to it.

    Please confirm here in thread that you have sent that message.

    Kind Regards,
    Kris

  • Eugene
    • Site Builder, Child of Zeus

    Hi Kris,

    I’ve sent back. The only issue I have left is that the gif is again no longer working. If it’s possible to set it up such that the gif is working again. That would be great!

    See attached for more info.

    Thanks once again for your help Kris!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.