• Home
  • Support
  • Forum
  • Cobalt 8
  • gallery bxslider thumbnails (id="bx-pager") bug when having few galleries in the articles list view

klewas VIP
Total posts: 18
15 Mar 2014 15:12

I have found a bug in the field gallery when using "Template in the articles list view" -> full-bxslider.com.php

When you want to see few galleries in the list view the thumbnails of the second gallery doesn't work.. when you click on them they just redirects to home page, and not changes the slide. That's happens because of the duplicate value of id="bx-pager" and javascript fails.

For the fast fix I can share my template code with fixed issue: temlpate: full-bxslider.com.php

<?php
/**
 * Cobalt by MintJoomla
 * a component for Joomla! 1.7 - 2.5 CMS ( http://www.joomla.org )
 * Author Website:  http://www.mintjoomla.com/ 
 * @copyright Copyright (C) 2012 MintJoomla ( http://www.mintjoomla.com ). All rights reserved.
 * @license   GNU/GPL  http://www.gnu.org/copyleft/gpl.html 
 */
defined('_JEXEC') or die();

if(empty($this->value))
{
    return null;
}

if(isset($_POST["gallery_counter"])){
    $_POST["gallery_counter"]++;
}else{
    $_POST["gallery_counter"] = 1;
    JFactory::getDocument()->addScript(JUri::root(TRUE) . '/components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.min.js');
    JFactory::getDocument()->addStyleSheet(JUri::root(TRUE) . '/components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.css');
}

$key = $this->id . '-' . $record->id;
$dir = JComponentHelper::getParams('com_cobalt')->get('general_upload') . DIRECTORY_SEPARATOR . $this->params->get('params.subfolder', $this->field_type) . DIRECTORY_SEPARATOR;
?>
    <style type="text/css">
        [id|=bx-pager] {
            margin-top: -61px;
        }
        [id|=bx-pager] a {
            margin-bottom: 5px;
        }
        [id|=bx-pager] a.active img {
            background-color: #E8D2FF;
            border-color: #4A1086;
        }
        .bx-controls-auto {
            text-align: right;
        }
    </style>
    <div id="galleria<?php echo $key?>">
        <?php
        foreach ($this->value as $picture_index => $file)
        {
            $picture = $dir . $file['fullpath'];
            $url     = CImgHelper::getThumb($picture, $this->params->get('params.full_width', 100), $this->params->get('params.full_height', 100), 'gallery' . $key, $record->user_id,
                array(
                     'mode'       => $this->params->get('params.full_mode', 6),
                     'strache'    => $this->params->get('params.full_stretch', 1),
                     'background' => $this->params->get('params.thumbs_background_color', "#000000"),
                     'quality'    => $this->params->get('params.full_quality', 80)
                ));
            echo '<div class="slide"><img src="' . $url . '"></div>';
        }
        ?>
    </div>
    <div id="bx-pager-<?php echo $_POST["gallery_counter"];?>">
        <?php
        foreach ($this->value as $picture_index => $file)
        {
            $picture = $dir . $file['fullpath'];
            $url     = CImgHelper::getThumb($picture, 86, 60, 'gallery' . $key, $record->user_id,
                array(
                     'mode'       => 1,
                     'strache'    => 1,
                     'background' => $this->params->get('params.thumbs_background_color', "#000000"),
                     'quality'    => 80
                ));
            echo '<a data-slide-index="'.$picture_index.'" href="/"><img class="img-circle img-polaroid" src="' . $url . '"></a>';
        }
        ?>
    </div>

    <script type="text/javascript">
        jQuery('#galleria<?php echo $key?>').bxSlider({mode: 'fade', auto: true, autoControls: false, adaptiveHeight: true, pagerCustom: '#bx-pager-<?php echo $_POST["gallery_counter"];?>'});
    </script>


<?php if ($this->params->get('params.download_all', 0) == 1): ?>
    <div class="clearfix"></div>
    <a class="btn btn-success" href="/<?php echo Url::task('files.download&fid=' . $this->id . '&rid=' . $record->id, 0); ?>">
        <?php echo JText::_('CDOWNLOADALL') ?>
    </a>
<?php endif; ?>

Last Modified: 17 Mar 2014


klewas VIP
Total posts: 18
15 Mar 2014 15:19

I forgot that I changed the default css code: it should be like this:


[id|=bx-pager] { margin-top: -40px; } [id|=bx-pager] a { margin-right: 5px; margin-bottom: 5px; } [id|=bx-pager] a.active img { background-color: #E8D2FF; border-color: #4A1086; } .bx-controls-auto { text-align: right; }

Sergey
Total posts: 13,748
17 Mar 2014 03:31

Thank you very much. I have applied fixes for new version.

Powered by Cobalt