Flash Triggered Gallery...Here's How.

classic Classic list List threaded Threaded
37 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Flash Triggered Gallery...Here's How.

The Feldkircher
Hi All

3 days ago I discovered Shadowbox, yeah where have I been. How cool is this app.

Anyways, I was looking for a way to get a Flash element to trigger a Gallery, tried everything to get this working to no avail.

I quickly discovered the getURL example on the FAQ page, but I'm using Flash CS4 AS3.0 and this example only triggers a single item for shadowbox to use.

Having searched this Forum, it also seems there are many others who where having the same problem.

So I set about finding a solution and here it is...


I needed a way to setup a gallery from one call, here is the Flash part -


function btnClick(e:Event):void
{
        e.currentTarget.btn_mc.btnTxt.textColor = "0x0F0F0F";
        ExternalInterface.call("MyGallery"); // Talks to index.html
}

So that's it with the Flash part, pretty simple really - now lets create our Gallery..


Inside our index.html file we have the following standard shadowbox scripts - src= will depend on your path structure but the target is always the same.

<script type="text/javascript" src="shadowbox-2.0/src/adapter/shadowbox-base.js"></script><script type="text/javascript" src="shadowbox-2.0/src/shadowbox.js"></script><script type="text/javascript"> Shadowbox.loadSkin('classic', 'shadowbox-2.0/src/skin'); // use the "classic" skin Shadowbox.loadLanguage('en', 'shadowbox-2.0/src/lang'); // use the English language Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'shadowbox-2.0/src/player'); window.onload = Shadowbox.init; </script>
 We need to add a new one, this is how it looks -

<script type="text/javascript" src="shadowbox-2.0/src/galleries.js"></script>
Save index.html and close it if you wish, where done with it.


Now open any text editor you like and create the file called galleries.js and save it in your shadowbox src folder.

Cut and paste the following into galleries.js

function MyGallery(){
    var video = {
        player:     'iframe',
        content:    'http://www.youtube.com/v/y8Kyi0WNg40&autoplay=1',
        height:     340,
        width:      405,
        title:      'Dramatic Look'
    };
       
        var img = {
        player:     'img',
        content:    'shadowbox-2.0/gallery/aston_martin/vanquish.jpg'
    };
       
        var img1 = {
        player:     'img',
        content:    'shadowbox-2.0/gallery/aston_martin/db9.jpg'
    };
       
        var img2 = {
        player:     'img',
        content:    'shadowbox-2.0/gallery/aston_martin/vantage.jpg'
    };

    Shadowbox.open([video, img, img1, img2], {
        continuous: true
    });

};

Change the paths to suit you structure - remember it's relative to index.html not galleries.js. Save it.

Basically what this does is setup Shadowbox with 4 items in MyGallery.

The key to the Gallery method is:-       Shadowbox.open([video, img, img1, img2], {
by creating one video and 3 img vars Shadowbox is tricked into displaying a Gallery.


Some of you may recognise this from the demo.js file that comes with Shadowbox, this is where my idea came from, on the demo page there is a Script-triggered Gallery option - all I did was extend the idea using more variables in the Shadowbox.open call and hey-presto - success.

Obviously galleries.js can now grow as a library containing all your galleries - just call each gallery by a different function name.

I have tried this on my localhost and it functions without problems.

I just hope I can get my clients to update XML and Galleries.js - ah well some answers are harder to solve.

Happy Shadows







Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

neocorps
Thanx for the message, i managed to open shadowbox from a flash button, and had a hell of a time making it work, since i don't know nor use much JavaScript.

I'm mostly a php, flash developer and web designer.

So this will come handy some day i know for sure.

Thanx for explaining the code, not just pointing how it could be done and laughing at other people who are clueless and don't have the time to learn a scripting language just to make one app work in conjunction with what they're doing.
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

build
G'day Ninja,
I've never seen anyone on this forum laugh at others. Some may get tired of folk wanting others to do everything for them. Remember blokes like Wizzud and others generously give their time for free helping others here, so the least they expect is that those folk put some effort into the problem too.

beers,
build
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
In reply to this post by The Feldkircher
Hello

Neocorps - my pleasure, hope you find it useful.

Since I posted my original How To, using a little php magic I have created a php file to extract the Gallery items from an XML file to generate the galleries.js file on the fly.

If anybody is interested I can post the php file here or mail it to you.

Cheers
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

Twansparant
Hi there,

I've been struggling with this example for some time now....
I want to launch a gallery with 4 flv files from within flash. When I test the abobe example it works fine,
but I can't seen to make it work for the flv player.....

First of all I made the flash part in AS 2.0 like this:


import flash.external.*;

button.onRelease = function() {
        ExternalInterface.call("Test");
}


Then I modified the galleries.js like this:

function Test(){
    var video_1 = {
        player:     'flv',
        content:    'animaties/test.flv',
        width:       320,
        height:      240,
        title:      'Test'
    };
       
    var video_2 = {
        content:    'animaties/test.flv',
        width:      320,
        height:     240,
        player:     'flv',
        title:      'Test'
    };
       
    var video_3 = {
        content:    'animaties/test.flv',
        width:      320,
        height:     240,
        player:     'flv',
        title:      'Test'
    };
       
    var video_4 = {
        content:    'animaties/test.flv',
        width:      320,
        height:     240,
        player:     'flv',
        title:      'Test'
    };

    Shadowbox.open([video_1, video_2, video_3, video_4], {
        continuous: true
    });

};

The paths from the index.html to the files are correct.
This is the piece in the index I use to launch single images in a shadowbox:

<script type="text/javascript"> var openShadowbox = function(content, width, height, player, title){ Shadowbox.open({ content: content, width: width, height: height, player: player, title: title }); }; </script>
I'm beginning to think it has something to do with the set of parameters.
Which ones should I use? In the shadowbox-flv.js file there are the following parameters for flv:

'file=' + this.obj.content,
'height=' + h,
'width=' + w,
'autostart=' + autoplay,
'displayheight=' + displayheight,
'showicons=' + showicons,
'backcolor=0x000000',
'frontcolor=0xCCCCCC',
'lightcolor=0x557722'

I tried both combinations of parameters and a shadowbox does pop up with the right dimensions
and skin etc. but he can't seem to find/play the flv file itself.

Does anyone have an idea how to solve this?
Many thanks!

Cheers
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
In reply to this post by The Feldkircher
Thank you very much! Could you also show how to load the items from a xml with your php file.
Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

build
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
Well I was talking to Feldkircher. But thank you for providing a general link about php and xml.
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
In reply to this post by Twansparant
Hello Twansparant

Strange, it doesn't work for me either. Have no solution just yet but I'm working on it.

caio for now
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
In reply to this post by taihan
Hi taihan

No problem glad to help -

This is a sample of my xml file - pretty basic nothing special really.

<?xml version="1.0" encoding="ISO-8859-1" ?>
-<Content>
-<Page area="Galleries">
        -<Galleries>
          -<Gallery name="GalleryNine">
                     <item type="img" player="img" content="images/full/0612081.jpg"></item>
                <item type="img" player="img" content="images/full/0612082.jpg"></item>
                <item type="img" player="img" content="images/full/0612083.jpg"></item>
                <item type="img" player="img" content="images/full/0612084.jpg"></item>
                <item type="img" player="img" content="images/full/0612085.jpg" title=""></item>
                <item type="img" player="img" content="images/full/0612086.jpg" title=""></item>
                <item type="img" player="img" content="images/full/0612087.jpg"></item>
                <item type="img" player="img" content="images/full/0612088.jpg" title=""></item>
                <item type="img" player="img" content="images/full/0612089.jpg" title=""></item>
                <item type="img" player="img" content="images/full/06120810.jpg" title=""></item>
                <item type="img" player="img" content="images/full/06120811.jpg" title=""></item>
          </Gallery>       
          +<Gallery name="GalleryEight">
          +<Gallery name="GallerySeven">
          +<Gallery name="GallerySix">
          +<Gallery name="GalleryFive">
          +<Gallery name="GalleryFour">
          +<Gallery name="GalleryThree">
          +<Gallery name="GalleryTwo">       
          +<Gallery name="GalleryOne">       
        </Galleries>
</Page>
</Content>

If your wondering why there are 'type' and 'player' values, it's because you can show the same type of content in different players. ie:- images in an img or an IFrame player.

And here is the php file. It uses the php5 simplexml and xpath functions. I've made comments, but if you need anything more let me know.

?php
 $file_cs = ""; // file content start
 $file_ce = "Shadowbox.open(["; // File content end
 $file_ts = ""; // File to save when all Galleries have been created
 $count = 0; // Variable added to the end of each item var
 echo "Building Gallery.js"; // Let the user know we've started
  $xml = simplexml_load_file('content.xml'); // Load the xml file
  $galleries = $xml->xpath('/Content/Page/Galleries/Gallery');  // Change this to suit your Gallery path within your xml file
  foreach ($galleries as $gallery) {
      $file_cs .= "function " . $gallery['name'] ."() {"; // Create the Function for each Gallery
      foreach ($gallery->item as $item) { // Item is the xml node name for each item in the Gallery
        $file_cs .= "var " . $item['type']. $count . " = {";   // Create variable based on type of content
        $file_ce .= $item['type']. $count .", ";              // Place variable into Shadowbox.open array
        $file_cs .= "player: '" . $item['player']."',";
        $file_cs .= "content: '" . $item['content']."',";
        $file_cs .= "height: '" . $item['height']."',";
        if ($item['title'] !=""){ // If title then add it and the comma from the previous element
         $file_cs .= "width: '" . $item['width']."',";
         $file_cs .= "title: '" . $item['title']."'"; }
          else{                // No title
              $file_cs .= "width: '" . $item['width']."'";
        }
        $file_cs .= "};"; // close setup
        $count += 1; // Increase count
      }
          $file_ts .= $file_cs; // add current gallery content to file to save variable
          $file_cs = "";                // Clear and Restart for next Gallery
          $temp = substr_replace($file_ce, "], {", strripos($file_ce,",")); // Remove last comma from last variable and replace with Shadowbox.open closing bracket
          $file_ce = $temp;
          $file_ce .= "continuous: true }); };"; // Close Shadowbox.open setup and Close Gallery
          $file_ts .= $file_ce; // add current gallery ending to file to save variable
          $file_ce = "Shadowbox.open(["; // Clear and Restart for next Gallery
    }
        echo " Done";
        file_put_contents("gallery.js", $file_ts); // write file to create gallery.js
?>

Save as content.xml and library.php in the same folder and run library.php in your browser.


Happy Shadows
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
Thank you very much!
Really helps but one last question. I'm not much of a html and php coder. Is this library.php at the sametime your  index file from where the shadowbox and the flash file is also defined? If not and you actually have an index.html how do you connect the php with it? Yeah I know that question is surely silly.
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
Hi
 
No question is silly, we learn by asking
 
Library.php is only used to generate your gallery.js file.
 
content.xml, library.php should be on your server in the same folder, when you update, edit, change content.xml then run library.php from your broswer
 
for example http:\\www.yoursite.com\library.php - this will read your content.xml and create a new version of gallery.js.
 
index.html will contain your flash site and shadowbox is initialized within this html wrapper.
 
Happy Shadows

Sent: Tuesday, January 27, 2009 6:00 PM
Subject: Re: Flash Triggered Gallery...Here's How.

Thank you very much!
Really helps but one last question. I'm not much of a html and php coder. Is this library.php at the sametime your  index file from where the shadowbox and the flash file is also defined? If not and you actually have an index.html how do you connect the php with it? Yeah I know that question is surely silly.


This email is a reply to your post @ http://n2.nabble.com/Flash-Triggered-Gallery...Here%27s-How.-tp1802473p2226863.html
You can reply by email or by visting the link above.

Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
Thank now I get it I kinda thought the php is automatically called within the index.html somehow, so that it would update by it self. Thanks for helping me understand and the great coding!
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
In reply to this post by The Feldkircher
Hi,
sorry to bug you again. Think is I tried your php file on my server but I always get this error

Building Gallery.js
Fatal error: Call to undefined function: simplexml_load_file()

just so you know, I basically didn't change anything in your code for the test. But it seems like it can't find the content.xml or something I really don't get it. Hope you can help me out. THANKS!!
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
nevermind seems to work, sorry. It says it has created the gallery.js BUT when I check it didn't create or changed the file at all. I don't see what could case that. As I wrote before I didn't change anything in your code to make sure it will work.
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
In reply to this post by taihan
Hi
 
No Problem
 
simplexml_load_file() requires a minimum of PHP5 to be installed on your server.
 
If your running this on a hosting site, then you should have the option to upgrade to PHP5 in your control panel.
If your running this on a localhost ie your computer, then you need to upgrade your PHP version to latest.
 
Hope it helps.

Sent: Monday, February 09, 2009 2:25 AM
Subject: Re: Flash Triggered Gallery...Here's How.

Hi,
sorry to bug you again. Think is I tried your php file on my server but I always get this error

Building Gallery.js
Fatal error: Call to undefined function: simplexml_load_file()

just so you know, I basically didn't change anything in your code for the test. But it seems like it can't find the content.xml or something I really don't get it. Hope you can help me out. THANKS!!


This email is a reply to your post @ http://n2.nabble.com/Flash-Triggered-Gallery...Here%27s-How.-tp1802473p2295134.html
You can reply by email or by visting the link above.

Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
Thank you! It works perfect in Firefox. I just notice in Internet Explorer that it doesn't fire up Shadowbox. Just get a error message that a "null" is Null or isn't an object. I wonder if you got in any trouble like that with IE. Again thank you very much for your help. Is it maybe because of window.onload = Shadowbox.init;
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
In reply to this post by The Feldkircher
Hi,
nice walkaround! works fine! what I was wondering now is it also possible to make it launch a thumbnail gallery not just a gallery which starts at the first image in the gallery? that would be awesome!
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

The Feldkircher
Hi Taihan

Just so I understand what you need ,  you want a Thumbnail Gallery in ShadowBox triggered from Flash?
Reply | Threaded
Open this post in threaded view
|

Re: Flash Triggered Gallery...Here's How.

taihan
well you know the way you did it a gallery is fired by clicking on one button/link/what so ever. means it always starts at the first image of the gallery.

what i want is more like having for example 3 thumbs but depending on what thumb you click the gallery starts with that kind of image. It's like the mustang thumb gallery example on the main page of shadowbox.
12