1. Download Lytebox
2. Drop Lytebox in /assets/snippets/maxigallery/lytebox
3. Open /assets/snippets/maxigallery/lytebox/js/lytebox.js and add this function:
function checkVersion() {
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var ieversion = new Number(RegExp.$1)
if (ieversion >= 8 )
return false;
else if (ieversion < 8 )
return true;
}
return false;
}
Before this function:
LyteBox.prototype.initialize = function() {
This fixes a problem with IE8 recognizing the lytebox css selectors.
4. Open /assets/snippets/maxigallery/smoothgalery/js/jd.gallery.js and change this:
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
To this:
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: '',
rel: 'lytebox'
5. Open /assets/snippets/maxigallery/maxigallery.class.inc.php and change this:
//smoothgallery scripts
$smoothgallery_css_link = '<link rel="stylesheet" href="' . $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/css/jd.gallery.css" type="text/css" media="screen" />';
$smoothgallery_script_link1 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/mootools.v1.11.js';
$smoothgallery_script_link2 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.js';
$smoothgallery_script_link3 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.transitions.js';
$smoothgallery_script_link4 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.set.js';
$smoothgallery_script_link5 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/HistoryManager.js';
To this:
//smoothgallery scripts
$smoothgallery_css_link = '<link rel="stylesheet" href="' . $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/css/jd.gallery.css" type="text/css" media="screen" />';
$lytebox_css_link = '<link rel="stylesheet" href="' . $modx->config['base_url'] . MAXIGALLERY_PATH . 'lytebox/css/lytebox.css" type="text/css" media="screen" />';
$smoothgallery_script_link1 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/mootools.v1.11.js';
$smoothgallery_script_link2 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.js';
$smoothgallery_script_link3 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.transitions.js';
$smoothgallery_script_link4 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/jd.gallery.set.js';
$smoothgallery_script_link5 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'lytebox/js/lytebox.js';
$smoothgallery_script_link6 = $modx->config['base_url'] . MAXIGALLERY_PATH . 'smoothgallery/js/HistoryManager.js';
And this:
//register smoothgallery scripts if in use
if(($this->mgconfig['childembedtype'] == "smoothgallery" || $this->mgconfig['embedtype'] == "smoothgallery") || ($this->mgconfig['smoothgallery_pictureview'])) {
$modx->regClientCSS($smoothgallery_css_link);
// do not include mootools if javascript libraries are set to be disabled
if(!$this->mgconfig['disable_js_libs']) {
$modx->regClientStartupScript($smoothgallery_script_link1);
}
$modx->regClientStartupScript($smoothgallery_script_link2);
$modx->regClientStartupScript($smoothgallery_script_link3);
if ($this->mgconfig['childembedtype'] == "smoothgallery") {
$modx->regClientStartupScript($smoothgallery_script_link4);
}
if($this->mgconfig['smoothgallery_useHistoryManager'] == 'true') {
$modx->regClientStartupScript($smoothgallery_script_link5);
}
}
To this:
//register smoothgallery scripts if in use
if(($this->mgconfig['childembedtype'] == "smoothgallery" || $this->mgconfig['embedtype'] == "smoothgallery") || ($this->mgconfig['smoothgallery_pictureview'])) {
$modx->regClientCSS($smoothgallery_css_link);
$modx->regClientCSS($lytebox_css_link);
$modx->regClientStartupScript($smoothgallery_script_link1);
// do not include mootools if javascript libraries are set to be disabled
if(!$this->mgconfig['disable_js_libs']) {
$modx->regClientStartupScript($smoothgallery_script_link2);
}
$modx->regClientStartupScript($smoothgallery_script_link3);
$modx->regClientStartupScript($smoothgallery_script_link5);
if ($this->mgconfig['childembedtype'] == "smoothgallery") {
$modx->regClientStartupScript($smoothgallery_script_link4);
}
if($this->mgconfig['smoothgallery_useHistoryManager'] == 'true') {
$modx->regClientStartupScript($smoothgallery_script_link6);
}
}
And move this line:
$this->regSnippetScriptsAndCSS();
To before this line:
//register smoothgallery scripts if in use
This fixes an issue with smoothgallery rendering in safari/konq when css file is loaded after js scripts (smoothgallery thumbnail tab sticks open otherwise).
6. Point smoothgallery to a custom tpl:
&galleryPictureTpl=`@FILE:assets/snippets/maxigallery/templates/smoothgallerypicturetpl.html`
Here’s my smoothgallerypicturetpl.html:
[+maxigallery.embedtype:is=`smoothgallery`:then=`
<div class="imageElement">
<h3>[+maxigallery.picture.title:htmlent+]</h3>
<p>[+maxigallery.picture.descr:htmlent+]</p>
<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]" rel="lytebox[image[+maxigallery.pageinfo.id+]set]" class="open"></a>
<img src="[*myimage:phpthumb=`h=135&w=180&zc=1#[+maxigallery.path_to_gal+][+maxigallery.picture.filename+]#1`*]" class="full" />
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" />
</div>
`+]
I’ve seen a few posts asking for this. I’ve actually got it working although I can’t get Lytebox to recognize all the pictures as part of the same gallery. Sadly prev/next doesn’t work in the Lytebox overlay. I realize this is semi-quick and very dirty. My goal was simply to get it working, not to mention my knowledge is limited. I figured while I went through all this trouble maybe this could help others as it seems no one has tried to expand on this. If you want a single picture Lytebox with Smoothgallery in MG, this seems to work. Hope this helps someone.
EDIT - This with MG v0.6, Evo 1.0, and Lytebox 3.22
