Jump to content

PW and UIKit lightbox

GuruMeditation

By GuruMeditation,
in General Support

 Share

Recommended Posts

GuruMeditation Sr. Member

GuruMeditation

Posted
Posted

Hi all,
 
I'm working on a project which will be using UIKit for the frontend framework, and the front page will display images that are attached to various pages. I'm using CroppableImage to generate the thumbnails. The idea is that clicking on the thumbnails will display the original image in UIKit's lightbox. The problem is that I can't get the lightbox to work.
 
My simplified code......

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="<?php echo $config->site_meta;?>">
<title><?=$config->site_title;?> | <?=$page->title;?></title>

<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/uikit.css">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="<?=$config->urls->templates;?>js/uikit.min.js"></script>

</head>

<body>

<?php

$items = $pages->find("template=link_full, limit=10, sort=-f_date");

foreach($items as $item) {

   $image = $item->f_multi_image->first()->getCrop('frontpage');

   echo "<article class='uk-article'>
           <a class='uk-thumbnail' href='{$image->url}' data-uk-lightbox title='{$image->description}'>
           <img src='{$image->url}' alt='{$image->description}' />
           </a>
         </article>";
}

</body>

Now, I've added the "data-uk-lightbox" attribute as it states in the docs http://getuikit.com/docs/lightbox.html but I'm at a loss after that.

Any help?

Link to comment
Share on other sites
pideluxe Full Member

pideluxe

Posted
Posted

First of all, you should link to the original image in the a-tag, not using the same url as the thumbnail.

Next thing to check is that all UIKit-specific things like css and js are loaded correctly. Do you use the full UIKit or a customized version? If that is ok, it should work...

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
Posted

I'm using this function to load the addons together with the great AIOM module

/** 
 * loads css and javascript files by name of component from different css frameworks
 *
 * @param string component | name of component
 * @param string framework | name of framework, defaults to uikit
 *
 */
function styleAddon($component = '', $framework = 'uikit') {

    $min = '.min'; // you can set this empty for debugging
    
    switch ($framework) {
        
        case 'semanticui':
            
            // add css if it exists
            $cssFile = 'semanticui/components/'.$component.$min.'.css';
            if(is_file($cssFile)) wire('config')->cssFiles->add($cssFile);
            
            // add js if it exists
            $jsFile = 'semanticui/components/'.$component.$min.'.js';
            if(is_file($jsFile)) wire('config')->jsFiles_head->add($jsFile);
            
            break;

        default:
            
            // add css if it exists
            $cssFile = 'uikit/css/components/'.$component.$min.'.css';
            if(is_file($cssFile)) wire('config')->cssFiles->add($cssFile);
            debug('added ' . $cssFile);
            
            // add js if it exists
            $jsFile = 'uikit/js/components/'.$component.$min.'.js';
            if(is_file($jsFile)) wire('config')->jsFiles_head->add($jsFile);
            debug('added ' . $jsFile);
            
            break;
    }
}

/** 
 * converts the style/script object to an array
 *
 * @param string component | name of component
 * @param string framework | name of framework, defaults to uikit
 *
 */
function toArray($obj) {
    $arr = array();
    foreach ($obj as $key => $value) {
        $arr[] = $value;
    }
    return $arr;
}
 
/** 
 * log value to javascript console
 *
 * @param string text | error message
 *
 */
function debug ($data) {
    // show debug only in debug mode
    if(!wire('config')->debug) return;

    echo "<script>\r\n//<![CDATA[\r\nif(!console){var console={log:function(){}}}";
    $output    =    explode("\n", print_r($data, true));
    foreach ($output as $line) {
        if (trim($line)) {
            $line    =    addslashes($line);
            echo "console.log(\"{$line}\");";
        }
    }
    echo "\r\n//]]>\r\n</script>";
}

of course you can remove all the debugging... i found it in the forum and for me it was helpful :)

then in your main markup file:

// stylesheets and javascripts
$config->cssFiles = new FilenameArray();

// javascript files
$config->jsFiles_head = new FilenameArray();

$config->cssFiles->add('uikit/less/themes/default/uikit.less'); // you can use the css version of course
styleAddon('lightbox');
styleAddon('slidenav');
styleAddon('dotnav');
styleAddon('slideshow');
styleAddon('notify');
styleAddon('sticky');

// convert css/js object to array for all-in-one-minify-module
$cssFiles = toArray($config->cssFiles);
$jsFiles_head = toArray($config->jsFiles_head);
?>
<!-- load css and javascripts -->
<link rel="stylesheet" href="<?php echo AIOM::CSS( $cssFiles ); ?>">
<script src="<?php echo AIOM::JS( $jsFiles_head ); ?>"></script>
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...