+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Scripts & Components (http://get-simple.info/forums/forumdisplay.php?fid=11)
+--- Thread: Superbox (as Lightbox modal window) Integration - how to (/showthread.php?tid=245)
Superbox (as Lightbox modal window) Integration - how to - focoves - 2009-12-13
If you like to integrate modal windows on a "Get Simple" way, may be it helps
Superbox is a modal window (as Lightbox) that comes with GS back-end.
Is lightweight and works with jquery.
So, that's good reason enough to use Superbox in place of any other modal window.
HOW TO ?
*1* Creating a Template file that calls the javascript and style files that make superbox work.
1) Go to THEMES/(template-folder)/ and copy template.php in a new file like superbox.php
2) Edit that file and Add code to link core JS and CSS superbox files already included in the ADMIN
Code:
<HEAD>
...
<!-- JS Files -->
<script type="text/javascript" src="admin/template/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="admin/template/js/jquery.getsimple.js"></script>
<script type="text/javascript" src="admin/template/js/superbox/jquery.superbox.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" type="text/css" href="admin/template/js/superbox/jquery.superbox.css" media="screen" />*2* Modify TinyMCE to add attributes to link using superbox
Go to
admin\template\js\tiny_mce\plugins\advlink\
and edit the file
link.htm (I attach a already modified copy to make things easyer)
on row #198, You will find the dropdown list of attributes for advanced link tab (of create link button)
In order to allow the different options of superbox (more info at superbox creator's http://www.pierrebertet.net/projects/jquery_superbox/ ) you have to add the lines 4 to 8 from below code.
Code:
<td><label id="rellabel" for="rel">{#advlink_dlg.rel}</label></td>
<td><select id="rel" name="rel">
<option value="">{#not_set}</option>
<option value="superbox[image]">Superbox.img</option>
<option value="superbox[gallery][gallery_a]">Superbox.gelleri_A</option>
<option value="superbox[gallery][gallery_b]">Superbox.gelleri_B</option>
<option value="superbox[iframe][700x500]">Superbox.iFrame</option>
<option value="superbox[content]">Superbox.Content</option>
<option value="lightbox">Lightbox</option>*3* Compose/Create your final page
On GS Admin -> Create Page -> Page Options -> Template -> choose superbox.php (created on above point 1)
Select an element (ie an image), click on LINK button, Advanced Tab, and into Relationship page to target, select superbox.img -> update
that's all folks =)
You can try options for gallery.A , or even 2 gallerys togheter.
Superbox.Iframe you can link URLS into the modal window.
andaluzian regards !
Superbox (as Lightbox modal window) Integration - how to - Zegnåt - 2009-12-13
Nicely done.
I’m not completely sure whether I like linking Javascript files used by the admin though. Partly because at some point they might be outdated (especially jQuery) and partly because it decentralises the theme.
Superbox (as Lightbox modal window) Integration - how to - focoves - 2009-12-14
Hi Zegnåt,
yes, it does descentralises the theme, and it can be unsecure -for showing the ADMIN path-
If anybody likes changing the theme, it is allways possible.
My idea was helping people to give a solution without installing anything, and changing the less possible the GS App package.
andaluzian regards
Superbox (as Lightbox modal window) Integration - how to - andyash - 2011-11-22
A way of protecting the admin files is to copy the related files inside the template folder. I just tested this with Fancybox successfully
1. theme file inside the <head></head> tags just before <?php get_header(); ?>
<script type="text/javascript" src="<?php get_theme_url(); ?>/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php get_theme_url(); ?>/assets/js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="<?php get_theme_url(); ?>/assets/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function() {
if(jQuery().fancybox) {
$("a[rel*=enlarge]").fancybox();
}
});
</script>
2. In the page the image link should have
<a href="your link" class="fancybox" rel="enlarge" title="your title"><img src="your image"></a>