Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Superbox (as Lightbox modal window) Integration - how to
#1
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 !
Reply
#2
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.
“Don’t forget the important ˚ (not °) on the a,” says the Unicode lover.
Help us test a key change for the core! ¶ Problems with GetSimple? Be sure to enable debug mode!
Reply
#3
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
Reply
#4
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>
Reply




Users browsing this thread: 1 Guest(s)