Jump to content
GuruMeditation

PW and UIKit lightbox

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Lightbox is an add-on, which means that you need to include the JS and CSS files separately. It's not part of the UIKit core files.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Peter Knight
      Hi guys
      I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
      You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
      The main column in the above URL is successfully centered in most browsers except IE11.
      On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
      Here's a simple CodeKit and JSFiddle of the issue
      https://codepen.io/edenstudios/pen/qvWpGo
      https://jsfiddle.net/EdenSt/auekfgqt/8/
      Thanks
      P
       
       
    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
×
×
  • Create New...