I have implemented the lytebox slideshow on a Gallery 3 site to demonstrate how it can be done via a link above the thumbnails in the widewind theme. I have used v3.22 of lytebox which can be found under at:
David Armstrong.
A. Lytebox javascript and style files (with css image files) stored in /lib
B.
Changes in bold to /themes/widewind/views/page.html.php to include lytebox javascript and style files in the combined js and css files.
<?= $theme->head() ?>
<?php /* Theme specific CSS/JS goes last so that it can override module CSS/JS */ ?>
<?= $theme->script("ui.init.js") ?>
<?= $theme->css("yui/reset-fonts-grids.css") ?>
<?= $theme->css("superfish/css/superfish.css") ?>
<?= $theme->css("themeroller/ui.base.css") ?>
<?= $theme->css("screen.css") ?>
<?= $theme->css("lytebox/css/lytebox.css") ?>
<?= $theme->script("lytebox/js/lytebox.js") ?> <?php if (locales::is_rtl()): ?>
<?= $theme->css("screen-rtl.css") ?>
<?php endif; ?>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?= $theme->url("css/fix-ie.css") ?>"
media="screen,print,projection" />
<![endif]-->
<!-- LOOKING FOR YOUR CSS? It's all been combined into the link below -->
<?= $theme->get_combined("css") ?>
<!-- LOOKING FOR YOUR JAVASCRIPT? It's all been combined into the link below -->
<?= $theme->get_combined("script") ?>
C.
Changes in bold to /themes/widewind/views/album.html.php to include link to lytebox above the thumbnail for photos. The relative_path link points to the image filenames as required by lytebox, and is added to the full path for the resizes folder as these are a suitable size for lytebox.
<ul id="g-album-grid" class="ui-helper-clearfix">
<?php if (count($children)): ?>
<?php foreach ($children as $i => $child): ?>
<?php if($child->tag_album != "tag") { ?>
<?php if ($child->is_album()): ?>
<?php $item_class = "g-album"; ?>
<?php elseif ($child->is_movie()): ?>
<?php $item_class = "g-movie"; ?>
<?php else: ?>
<?php $item_class = "g-photo"; ?>
<?php endif ?>
<li id="g-item-id-<?= $child->id ?>" class="g-item <?= $item_class ?>">
<?= $theme->thumb_top($child) ?>
<?php $address = $child->relative_path(); ?>
<?php $pathstart ="https://thejigasaurus.com/var/resizes/"; ?>
<?php $address = $pathstart.$address; ?>
<?php if ($child->is_photo()) { ?>
<?php $label = "Slideshow"; ?>
<a href="<?= $address ?>" rel="lyteshow" ><?= $label ?></a>
<?php } ?> <a href="<?= $child->url() ?>">
<?php if ($child->has_thumb()): ?>
<?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
<?php endif ?>
</a>
<?= $theme->thumb_bottom($child) ?>
<?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
<h2><span class="<?= $item_class ?>"></span>
<a href="<?= $child->url() ?>"><?= nl2br($child->title) ?></a></h2>
<ul class="g-metadata">
<?= $theme->thumb_info($child) ?>
</ul>
</li>
<?php } ?>
<?php endforeach ?>