1

I am using a K2 Content module to display 'Sponsors' of an event. You can see an example here

I have managed to set this up so that the columns can be scrolled manually using a mouse drag but ideally I would like this to be automatic i.e. Step through so that every x seconds the columns move one to the left.

Would this be simple to do? I've hunted around looking at bootstrap horizontal scrolling but haven't found anything relevant. Ideally I'd like this to have a carousel effect (so when it gets to the last sponsor it automatically loads the first).

The page source code is

    <?php
/**
 * @version     $Id: default.php 1766 2012-11-22 14:10:24Z lefteris.kavadas $
 * @package     K2
 * @author      JoomlaWorks http://www.joomlaworks.net
 * @copyright   Copyright (c) 2006 - 2012 JoomlaWorks Ltd. All rights reserved.
 * @license     GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */
// no direct access
defined('_JEXEC') or die;
?>
<?php if ($params->get('feed')): ?>
    <div class="k2FeedIcon">
        <a href="<?php echo JRoute::_('index.php?option=com_k2&view=itemlist&format=feed&moduleID=' . $module->id); ?>" title="<?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?>" target="_blank">
            <span><?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?></span>
        </a>
    </div>
<?php endif; ?>
<div id="k2ModuleBox<?php echo $module->id; ?>" >

<?php if ($params->get('itemPreText')): ?>
    <p class="modulePretext"><?php echo $params->get('itemPreText'); ?></p>
<?php endif; ?>

<?php if (count($items)): ?>
    <?php foreach ($items as $key => $item): ?>
    <article class="clearfix">
        <header>
           <?php if ($params->get('itemTitle')): ?>
                <h2 class="title"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h2>
            <?php endif; ?>
        </header>
        <section class="content">
            <?php if ($params->get('itemImage') || $params->get('itemIntroText')): ?>
                <?php if ($params->get('itemImage') && isset($item->image)): ?>
                    <div class="img">
                        <a href="<?php echo $item->link; ?>" title="<?php echo JText::_('K2_CONTINUE_READING'); ?> &quot;<?php echo K2HelperUtilities::cleanHtml($item->title); ?>&quot;">
                            <img src="<?php echo $item->image; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"/>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if ($params->get('itemIntroText')): ?>
                    <p>
                        <?php echo $item->introtext; ?>
                    </p>
                <?php endif; ?>
            <?php endif; ?>
        </section>
        <section class="ft-wrp clearfix">
            <div class="container sponsors-scroll">
            <div class="row flex-row flex-nowrap">
                <h4 class="rotate col-md-2">Sponsors</h4>
            <?php if ($params->get('itemExtraFields') && count($item->extra_fields)): ?>

                <?php $sponsors = array(); ?>
                <?php foreach ($item->extra_fields as $key => $fieldname): // regroup fields per level?> 
                    <?php if($fieldname->name === 'Url'):
                      $sponsors[$fieldname->alias][$fieldname->name] = $fieldname->url;
                    else:
                      $sponsors[$fieldname->alias][$fieldname->name] = $fieldname->value;
                    endif; ?>
                <?php endforeach; ?>
                <?php
                    // define sort order for $sponsors array
                    $sort_order = array('Location','Collaborating Partner','Platinum', 'Gold', 'Silver', 'Bronze','Carbon Neutrality', 'Booth', 'Cocktail', 'Badge', 'Event Partner', 'Media', 'Global', 'USA', 'Europe', 'Asia');

                    // sort $sponsors based on sort order in $sort_order
                    usort($sponsors, function ($a, $b) use ($sort_order) {
                        return array_search($a['Level'], $sort_order) - array_search($b['Level'], $sort_order);
                    });

                ?>
                <?php $i = 0; ?>
                <?php foreach ($sponsors as $key=>$value) : ?>
                 <?php 
                     if($i%2 == 0) {
                        //echo $i > 0 ? "</div>" : ""; // close div if it's not the first
                        //echo "<div class='row-fluid'>";
                      }

                    ;?>
                    <div class="col-xs-3">
                        <div class="spons-well">
                            <h4><small> <?php echo $value['Level'] ?> </small></h4>
                            <a href="<?php echo $value['Url'];?>" target="_blank"><?php echo $value['Logo'] ?></a>
                        </div>
                    </div>
                   <?php $i++ ;?>
                <?php endforeach; ?>   
              <?php endif; ?>
          </div>
      </div>
      </section>
    </article>
    <?php endforeach; ?>
<?php endif; ?>
</div>

I'm really a novice when it comes to JS so if anyone has applied something like this before then your help would be most appreciated.

Best Regards Donna

6
  • 3
    Hi Donna, please review your many prior questions and mark resolved pages with an accepted answer (and upvote answers that are helpful). This properly dignifies / rewards the volunteers that deliver useful support. Furthermore, it stops the system from "bumping" resolved pages to the top of the question pile. Thank you for looking after the community that looks after you. Jan 14, 2019 at 23:47
  • 1
    I'm going to keep praying that that isn't true. Jan 16, 2019 at 10:42
  • 1
    Hi guys, I have been going though my previous questions and marking answers valid - however many answers are not valid and/or not relevant.
    – Dtorr1981
    Jan 17, 2019 at 9:39
  • 1
    Thanks Donna. For the question that do not have adequate answers, please comment to invested volunteers with what isn't quite right. If anyone asked for clarification, please provided it. All questions should progress to a system-recognized resolution. 1. Answer acceptance. 2. Question Closure or 3. Question Retraction. Jan 17, 2019 at 10:07
  • 1
    Downvoting incorrect content is just as important as upvoting correct content. It is not intended to be a malicious act. By not commenting/downvoting bad content, future researchers will waste time trying things that will not work. For instance, before I found joomla.stackexchange.com/a/22632/12352 there were at least 3 researchers that upvoted (and possibly used) this answer that is very much wrong. We must all do our part to refine the content in this community. Thanks for the steps that you have taken. Jan 17, 2019 at 10:21

1 Answer 1

1

You should apply (if needed, customize for yourself) the html <div> structure, and use the js, and css from the examples (links) below:

https://jsfiddle.net/solodev/huten0wq/?utm_source=website&utm_medium=embed&utm_campaign=huten0wq

actually this is a better, I think last updated, source of this carousel: https://github.com/solodev/infinite-carousel (it is better to copy the source codes from this github link).

1. For using the css, and js from the above link, you should just rename the <section class="ft-wrp clearfix"> to <section class="customer-logos"> and <div class="spons-well"> to <div class="slide"> in your K2 layout in order to make it ready to work with the given css and javascript(jQuery), for example. Also you should wrap this carousel into

<div class="row">
<div class="container">

So it is not a huge job to use these on your layout. Maybe a little fine tuning needed, checking, modifying or deleting redundant divs in your current html structure, you have to work on that a bit...

2. The css from the link should be copied in your theme css, or custom.css file of your template and the jQuery(js) code should be copied within <script></script> tags at the bottom of your layout php file which you copied here, after the last closing html </div> tag (you could load these from external js file but now it is enough if you just include that in your layout)(the css could also be loaded from separate .css file but you can do that later. However, as later got clear, it is very important, that the carousel.css style has to loaded before the jQuery script starts to run on your site! Otherwise the carousel will look messed up a lot).

3. You have to make sure you load the 2 javascript/jQuery library in your HTML head or before your closing html body tag (if it's not there on your site yet):

jQuery min and slick js

you can just simply copy and paste it in the <head></head> of your page from here:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Or in a more Joomla standard way, you paste this code below to the top of your K2 layout file to load the required js libraries like the following (after the line: defined('_JEXEC') or die;) :

$document = JFactory::getDocument();
$document->addScript('https://code.jquery.com/jquery-2.2.4.min.js'); // comment out this line if it's already loaded on your site.
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js');

(As I see, Bootstrap is already loaded on your site so it's better if you do not load that again. If the jQuery library also loaded already, then you should just // comment out the jQuery library loading from the above code).

And it's actually done.

And just for fun I now tested the above with dummy content (from arrays with few of your logos) in your given PHP/HTML layout code (modified a bit), then I can confirm that it works. Here is the result, recorded in gif on my test page:


Additional things:

The only reason I do not paste here your layout code edited, fully working with the above carousel, because I would like to let you to do that, understanding and following the above steps. That is the only way you will learn to use additional javascripts and css and it’s important for you to improve your skills with that.

more info about using the above is here: https://www.solodev.com/blog/web-design/adding-an-infinite-client-logo-carousel-to-your-website.stml

The above carousel is working fine but if you need more exapmle, another code which you can check out and 'borrow':

https://codepen.io/mdashikar/pen/VWPvgE

and it's made already even with Bootstrap 4 : https://bootsnipp.com/snippets/featured/client-or-partners-logo-slider (however I do not see any bootstrap in this (except the ‘container’) but it does not matter, this is just another version of the above, almost the same all of them).

There are a lot of versions of these ready to use carousels of this kind on the net. I hope the above can help you.

As you started to work on this and you now got stuck with the html divs, I copy here your edited K2 layout file and you can try this or use this in your layout. I of course did not tried this particular file since I do not have the required and called variables in it, but this is how your layout should look like. Check how the divs are restructured in the - sponsors carousel section - of the layout.

<?php

/**
 * @version     $Id: default.php 1766 2012-11-22 14:10:24Z lefteris.kavadas $
 * @package     K2
 * @author      JoomlaWorks http://www.joomlaworks.net
 * @copyright   Copyright (c) 2006 - 2012 JoomlaWorks Ltd. All rights reserved.
 * @license     GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */
// no direct access
defined('_JEXEC') or die;

$document = JFactory::getDocument();
// $document->addScript('https://code.jquery.com/jquery-2.2.4.min.js'); // jQuery already loaded on the page
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js');
?>

<?php if ($params->get('feed')): ?>
    <div class="k2FeedIcon">
        <a href="<?php echo JRoute::_('index.php?option=com_k2&view=itemlist&format=feed&moduleID=' . $module->id); ?>" title="<?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?>" target="_blank">
            <span><?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?></span>
        </a>
    </div>
<?php endif; ?>
<div id="k2ModuleBox<?php echo $module->id; ?>" >

<?php if ($params->get('itemPreText')): ?>
    <p class="modulePretext"><?php echo $params->get('itemPreText'); ?></p>
<?php endif; ?>

<?php if (count($items)): ?>
    <?php foreach ($items as $key => $item): ?>
    <article class="clearfix">
        <header>
           <?php if ($params->get('itemTitle')): ?>
                <h2 class="title"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h2>
            <?php endif; ?>
        </header>
        <section class="content">
            <?php if ($params->get('itemImage') || $params->get('itemIntroText')): ?>
                <?php if ($params->get('itemImage') && isset($item->image)): ?>
                    <div class="img">
                        <a href="<?php echo $item->link; ?>" title="<?php echo JText::_('K2_CONTINUE_READING'); ?> &quot;<?php echo K2HelperUtilities::cleanHtml($item->title); ?>&quot;">
                            <img src="<?php echo $item->image; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"/>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if ($params->get('itemIntroText')): ?>
                    <p>
                        <?php echo $item->introtext; ?>
                    </p>
                <?php endif; ?>
            <?php endif; ?>
        </section>

        <?php

        // here your sponsors carousel section starts -->

        ?>

            <?php if ($params->get('itemExtraFields') && count($item->extra_fields)): ?>

                <?php $sponsors = array(); ?>
                <?php foreach ($item->extra_fields as $key => $fieldname): // regroup fields per level?>
                    <?php if($fieldname->name === 'Url'):
                      $sponsors[$fieldname->alias][$fieldname->name] = $fieldname->url;
                    else:
                      $sponsors[$fieldname->alias][$fieldname->name] = $fieldname->value;
                    endif; ?>
                <?php endforeach; ?>
                <?php
                    // define sort order for $sponsors array
                    $sort_order = array('Location','Collaborating Partner','Platinum', 'Gold', 'Silver', 'Bronze','Carbon Neutrality', 'Booth', 'Cocktail', 'Badge', 'Event Partner', 'Media', 'Global', 'USA', 'Europe', 'Asia');

                    // sort $sponsors based on sort order in $sort_order
                    usort($sponsors, function ($a, $b) use ($sort_order) {
                        return array_search($a['Level'], $sort_order) - array_search($b['Level'], $sort_order);
                    });                    
                ?>

                <div class="row">
                    <div class="container">
                        <section class="customer-logos">

                            <h4 class="rotate col-md-2">Sponsors</h4>

                <?php foreach ($sponsors as $key=>$value) : ?>

                        <div class="slide">
                            <h4><small> <?php echo $value['Level'] ?> </small></h4>
                            <a href="<?php echo $value['Url'];?>" target="_blank"><?php echo $value['Logo'] ?></a>
                        </div>

                <?php endforeach; ?>                

                        </section>
                    </div>
                </div>

            <?php endif; ?>

    </article>
    <?php endforeach; ?>
<?php endif; ?>
</div>

<script type="text/javascript">
    $ = jQuery.noConflict();
    $(window).load(function () {
        $('.customer-logos').slick({
                slidesToShow: 6,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1000,
                arrows: false,
                dots: false,
                pauseOnHover: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 4
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 3
                    }
                }]
            });
        });
</script>

IMPORTANT UPDATE ABOUT USING THE CAROUSEL CSS STYLE

If you use javascript/jQuery all kinds of stupidity can happen on your site when you run these scripts (more if someone just starts with javascript), so here in this particular case happened that the slides stack up at the start of the carousel, however at the end of the carousel the slides were OK. It can cause a lot of headache to figure out why it happens, when everything looks correct.

Now in this case, if the jQuery script starts to run before the css is loaded then the first slides (or clones of slides) created by the script will be in different sizes (heights) than the later slides, due to the script trying to fill up white spaces in the slider. Thus the slides will stack up. The carousel will look a very ugly thing. And on the top of that you will feel really stupid. :) It happens when you copy the slider (carousel) css in one of your custom.css file which loads at the end of everything on your site.

So we have to load the carousel.css before the slider script (or carousel script, you name it). There are two easy way to do this.

1. Copy the whole carousel css on the top of your layout file between <style></style> tag. This is not the most optimal solution but it works very well. This is also the surest way to check if css cause problem.

2 Create a carousel.css file, put it in your yourjoomla/templates/yourtemplate/css folder and load that file from the top of your layout file (in this case in K2 layout file), with the same method as you loaded the slick.js file at the beginning of your file.

$document->addStyleSheet('/templates/yourtemplate/css/carousel.css');

If the css file is not loaded then try:

$url = JPATH_ROOT . '/templates/yourtemplate/css/carousel.css'; // try it with or without opening slash (directory separator at the beginning of the path.

$document->addStyleSheet($url);

So, this should handle the stupidity actually if the slides are stacking up.

Just to make sure I updated the jQuery script with adding a $(window).load() function to the beginning of the script to hold back jquery to fire before page is fully loaded.

And finally in this individual case the source of the slider appearance problem was a css rule which had to be added to the css of the slider and set to:

.slick-track {
    display: inline-flex;
    margin-top: 15px;
    margin-bottom: 15px;
}

This problem is not the same as feeding the slider with wrongly formulated, structured data, which was not a problem in this case at all.

20
  • 1
    @Dtorr1981 - You’re welcome! The only reasons I can imagine it is squashed in a corner on your page because you missed a <div> or </div> closing tag somwhere or the whole thing is pushed to the left by another <div class= “container...”>in your layout and this is outside of your main container div. and this one tries to push itself in the same row with the other div thus squashed, so you should check these Also make sure that this is wrapped in a <div class=“row”>, but I think you already did that, so that is not a problem.
    – Zollie
    Jan 18, 2019 at 13:37
  • 1
    @Dtorr1981 - If the carousel animation is not working, it can be because the same jQuery library is loaded on your page 2 times or the bootstrap library is loaded 2 times. It could also be that one of them is not loaded on your page, however, the first scenario is more possible. Check your page header in the page source and make sure that the required libraries are there and not 2 times. You should play with this a bit and it will work.
    – Zollie
    Jan 18, 2019 at 13:42
  • 1
    @Dtorr1981 - ohh, sorry, I just see that you linked your page, so I’ll check that myself soon, what could cause the problem there.
    – Zollie
    Jan 18, 2019 at 13:45
  • 1
    @Dtorr1981 - Donna, I updated my answer with the edited layout and you can check that or use that in your layout. Theoretically it must work- Please give me a feedback on this after you tried.
    – Zollie
    Jan 18, 2019 at 15:12
  • 1
    @Dtorr1981 - Donna, at least it's moving. :) You're doing great! I'm checking it on your page what could cause that strange stack up at the beginning.
    – Zollie
    Jan 18, 2019 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.