How to implement greybox

joel · 2007-06-23 21:17:48

Hi,

I am interested in implementing greybox in one of my sites. My idea is to display a set of images (eg. a category or some single image id’s) from a text-link like this:

<script> var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'}, {'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}]; </script> <a href="#" onclick="return GB_showImageSet(image_set, 1)">Show first picture in image_set</a>

It would also be nice to create the gallerylink via a custom field. Is this possible in any way?

Here is a live exemple over at greybox (at the bottom of the page)

Last edited by joel (2007-06-23 21:26:34)

colak · 2007-06-24 08:19:27

Did you check out bas-lightbox ? I do not think that it works with flickr but it does work with txp image categories…

joel · 2007-06-24 08:52:56

Yes, I’ve checked out all the available txp-plugins. The reason why I need the greybox is that I wanna display both websites and images “in the style of lightbox”. Lightbox can only display images as far as I know.

Everything is working in my basic html-setup. But I’m not sure how to integrate it in txp. Is custom fields the way to do this?

The flickr-image is just from the sample code from the greybox site. I will only use images processed within txp’s built in image handling system.

What I need to output is something like this:

<h3>Headline</h3>
<p>Body text</p>

<ul class="portfoliolink">

<li class="web"><a href="http://www.domain.com/" title="description of website" rel="gb_page_center[980, 680]">Show website</a></li>

<script>
var image_set = [{'caption': 'Image 1', 'url': 'http://www.domain.com/01.jpg'},
{'caption': 'Image 2', 'url': 'http://www.domain.com/images/02.jpg'}];
</script>

<li class="img"><a href="#" onclick="return GB_showImageSet(image_set, 1)">Show images (one by one)</a></li>

<ul>

Thanks in advance!

Last edited by joel (2007-06-24 09:02:03)

Pat64 · 2007-06-24 09:50:58

Hi Joel,

Try this page and clic on the disc covers gallery

It’s a greybox implemented within TXP.
If this is you want to have, I can tell you how I make the rule.
Cheers,

joel · 2007-06-24 10:30:29

Pat64 wrote:

Hi Joel,
Try this page and clic on the disc covers gallery
It’s a greybox implemented within TXP.
If this is you want to have, I can tell you how I make the rule.
Cheers,

Pat64,

This is exactly what I want exept for the thumbnail display. Instead I want a text link to start the slide show. I will love to have a look at your implementation!

Thanks!

Last edited by joel (2007-06-24 10:31:20)

Pat64 · 2007-06-24 11:22:37

Ok.
This is my rule. You have to change it for your purpose to have a link instead of linked images tags.
If you have some problem to make your rule, tell me ;)

First, upload all necessaries greybox library files within your server, then declare the links within the head of your page (“gabarit”) :

<script type="text/javascript">
    var GB_ROOT_DIR = "<txp:site_url />greybox/";
</script>
<script type="text/javascript" src="<txp:site_url />greybox/AJS.js"></script>
<script type="text/javascript" src="<txp:site_url />greybox/AJS_fx.js"></script>
<script type="text/javascript" src="<txp:site_url />greybox/gb_scripts.js"></script>
<link href="<txp:site_url />greybox/gb_styles.css" rel="stylesheet" type="text/css" />

Second, create a form named “gallery_php” and put this into it :

<txp:php>
// PHP raws for the gallery
global $thisarticle, $txp_image;
$site = 'http://'.$GLOBALS['siteurl'];
$liste = custom_field(array('name' => 'Liste_Photos')); // The custom field where photo's ID are stored
echo "<ul id=\"gallery\">\r";
if (!empty($liste)) {
$find[] = ', ';
$replace[] = ',';
$liste = str_replace($find, $replace, $liste);
$pic = explode(",",$liste);     // we creat an array
foreach($pic as $clé => $valeur)
{ echo "<li><a href=\"".$site."/images/".$valeur.".jpg\" title=\"gallery\" rel=\"gb_imageset[nice_pics]\"><img src=\"".$site."/images/".$valeur."t.jpg\" alt=\"\" /></a></li>\r"; }
} else {
echo "<li><a href=\"".$site."/images/".$thisarticle['article_image'].".jpg\" title=\"Show the photo\" rel=\"gb_imageset[nice_pics]\"><img src=\"".$site."/images/".$thisarticle['article_image']."t.jpg\" alt=\"\" /></a></li>\r";
} echo "</ul>";
// end PHP</txp:php>

That’s all.

All images are uploaded from TXP image tab.
You need to create a custom_field maned “Liste_Photos” to store photo’s ID in a comma separated list of ID’s
Use output_form form=“gallery_php” to call this where you want to display your greybox galery.

Cheers,

Last edited by Pat64 (2007-06-24 11:26:49)

joel · 2007-06-24 12:39:58

Thanks Patrick!

This gives me a hint of what can be done with greybox.

Since I’m not a php coder I could surley use som help on defining my own form. This is my components:

three custom fields:

1. url (a plain external URL to the website)
2. url_title (a description/title of the website)
3. portfolio_images (comma separated list of ID’s)

I need to achieve something like this

<ul class="portfoliolinks">

<li class="web"><a href="<txp:custom_field name="url" />" title="<txp:custom_field name="url_title" />" rel="gb_page_center[980, 680]"><txp:custom_field name="url" /></a></li>

<script>
var image_set = [{'caption': 'Lorem Ipsum', 'url': 'http://www.mydomain.com/images/01.jpg'},
  {'caption': 'Doler sit amet', 'url': 'http://www.mydomain.com/images/02.jpg'}];
</script>
<li><a href="#" onclick="return GB_showImageSet(image_set, 1)">Show the images from the customfield portfolioimages one by one</a></li>
</ul>

Thanks! :)

Pat64 · 2007-06-24 13:11:36

Sorry, I’m late to answer you. I’m just traying to install movabletype… And finaly… This blog system seems not very interesting… Not like (the new test realase) TXP 4.0.5 :)

So, I’m not a PHP programer but I thing you have to generate your javascript lines with PHP raw :

<script>
var image_set = [<txp:output_form form="gallery_php" />];
</script>

You need within gallery_php a while (condition) : instructions; endwhile; PHP function to generate all this lines :

with global variables to get the caption image ;
the path for each image’s IDs.

Cheers,

Last edited by Pat64 (2007-06-24 13:15:38)

joel · 2007-06-24 19:43:45

Thanks a lot Pat64!

Perhaps someone else with php-skills can help me with this?

Thanks in advance!

Last edited by joel (2007-06-24 19:49:45)

Pat64 · 2007-06-25 08:32:52

Hi Joel,

I’m working on your script… and I’ll show you all the code needed to work within TXP this afternoom.

joel · 2007-06-25 08:51:12

Thanks patrick,

I’ll send you a beer later! :)

Pat64 · 2007-06-25 10:15:46

Ok Done.

Based on your posts above, and the custom_field used, assuming you display each articles in a list on the same page, here the exactly results you want (tested work perfectly) :

1)° Upload all needed Greybox files into a greybox directory in your root site and add this before the </head> tag :

<script type="text/javascript" src="<txp:site_url />greybox/AJS.js"></script>
<script type="text/javascript" src="<txp:site_url />greybox/AJS_fx.js"></script>
<script type="text/javascript" src="<txp:site_url />greybox/gb_scripts.js"></script>
<link href="<txp:site_url />greybox/gb_styles.css" rel="stylesheet" type="text/css" />

2)° Create a gabarit assigned to a section.
3)° In your gabarit add this line :

<txp:article limit="5" listform="greybox_display" />

4)° In the “greybox_display” form add this :

<h3><txp:title /></h3>
<txp:body />
<ul class="portfoliolink">
<li class="web"><a href="//<txp:custom_field name="url" />" title="<txp:custom_field name="url_title" />" rel="gb_page_center[980, 680]"><txp:custom_field name="url" /></a></li>
<li><a href="#" onclick="return GB_showImageSet(image_set<txp:article_id />, 1)">Show the images from the customfield portfolioimages one by one</a></li>
</ul>
<script type="text/javascript">
var image_set<txp:article_id /> = [<txp:php>
global $thisarticle;
$site = 'http://'.$GLOBALS['siteurl']; // site root
$liste = custom_field(array('name'=>'portfolio_images'));
if (!empty($liste)) {
// create an array based on a coma separated list of IDs from portfolio_images custom_field
$find[] = ', ';
$replace[] = ',';
$liste = str_replace($find, $replace, $liste);
$pic = explode(",",$liste);
// we create javascript lines needed for Greybox 
foreach($pic as $clé => $valeur)
{ echo "{'caption': '".$caption."', 'url': '".$site."/images/".$valeur.".jpg'},";
};
} else {
echo '';
};
</txp:php>];
</script>

5)° That’s all.

Note : You don’t have the captions’s image cause I haven’t the caption global variable to make the rule. You need to ask to a Core Developer (Mary, Wet or Ruud my prefered Core Developers :) how to get the caption image with a global variable. If you have an answer : send me by mail cause I’m interested about that.

Hope that’s can help you.
I’m ok for a beer :)
Regard,

EDIT : code above changed to individualize javascript variable according my last post.

Last edited by Pat64 (2007-06-25 14:40:47)

Textpattern CMS

Textpattern CMS support forum

#1 2007-06-23 21:17:48

How to implement greybox

#2 2007-06-24 08:19:27

Re: How to implement greybox

#3 2007-06-24 08:52:56

Re: How to implement greybox

#4 2007-06-24 09:50:58

Re: How to implement greybox

#5 2007-06-24 10:30:29

Re: How to implement greybox

#6 2007-06-24 11:22:37

Re: How to implement greybox

#7 2007-06-24 12:39:58

Re: How to implement greybox

#8 2007-06-24 13:11:36

Re: How to implement greybox

#9 2007-06-24 19:43:45

Re: How to implement greybox

#10 2007-06-25 08:32:52

Re: How to implement greybox

#11 2007-06-25 08:51:12

Re: How to implement greybox

#12 2007-06-25 10:15:46

Re: How to implement greybox

Board footer