Forum Index > FlashYourWeb OS Support > MediaBlock New Topic Post Reply
 Adding Lightbox
 |  Printable Version
Anonymous: cyfroice
 January 18 2009 11:47 AM (Read 9755 times)  


I was considering adding jquery lightbox javascript (http://leandrovieira.com/projects/jquery/lightbox/) to the your script so my visitors could just view the photos on the remote site instead of having to view the site the gallery is located on to see a full size version of the photo. Do you have any idea how I might make this work?

Thanks!


 
Quote
suprsidr
 January 18 2009 18:24 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

That's a loaded question.
I don't really have time to get in depth without actually doing the work for you.
And my $$ jobs take priority.

Just include your js in your host page if you can, and all thats required from mediaBlock would be to change the class of the images.

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: cyfroice
 January 18 2009 21:46 PM  


Totally understand. This turned out to be a little more involved than I thought. I almost have it working I am having just a hard time with one little part. Once I get it working I will post the steps it took to get it working.

There is a line in the mediaBlock.php file that I need to change but I can't figure out what variable I need to use.

Line 557 reads like this: $display = '<a href="' . getLink($item) . '?phpMyAdmin=3t6YV1OfVqcEFfJg28R908aqSdc">'. $img .'</a>'."\n";

It generates a link that takes you to the gallery page that displays the image. The URL looks like this: http://www.website.com/gallery/main.php?g2_itemId=16&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT

I would like it to only load the original image (or a re sized one, whatever is easier) so I need the link to look like this: http://www.website.com/gallery/main.php?g2_view=core.DownloadItem&g2_itemId=18&g2_serialNumber=2

Do you know what variable I can replace $item with to get it to load only the original or a re sized image?

Thanks for you help and the great code!


 
Quote
suprsidr
 January 19 2009 05:18 AM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

getLink($item) does exactly what it says...generates a link to the image in gallery.
the $img which is defined a few lines above is the actual image, be it a thumb or resize or original.

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: cyfroice
 January 19 2009 13:09 PM  


I think I understand what you are saying. The change I need to be making is to the $img variable. Is that correct?

Because it seems the $img variable is currently calling out the thumbnail with this bit of code: $img = '<img src="'. $thumbUrl .'" width="' . $thumbWidth . '" height="' . $thumbHeight . '" id="IFid1" class="ImageFrame_image" alt="'. getTitle($item) .'">';

Do you have any idea off the top of your head how I could get it to call out the the actual image instead of the thumbnail?


 
Quote
Anonymous: cyfroice
 January 19 2009 13:24 PM  


I figured it out! Thanks for your help.

It turns out all I needed to change was the comman getLink to getView and it worked!


 
Quote
suprsidr
 January 19 2009 13:26 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

getView is the function that returns the items view.

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: cyfroice
 January 19 2009 20:55 PM  


Here is how I got lightbox to work with the MediaBlock script. In case anyone is interested.

1. I installed your script as instructed and tested it to make sure it was working properly.

2. I then downloaded and installed the jquery version of lightbox. You can download it for free here: http://plugins.jquery.com/files/jquery_lightbox_v1.3.5-final.zip

3. I then installed the lightbox code in the root of my website.

4. I then created a php file and installed the lightbox script in the header:

PHP Formatted Code
        <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
                <!-- Include Lightbox (Production) -->
                <script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
                <!-- Include Lightbox (Development) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.js"></script>-->
                <!-- Include Lightbox (Production, No linkback) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.packed.js?show_linkback=false"></script>-->
                <!-- Include Lightbox (Production, Manual baseurl) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.packed.js?baseurl=http://www.afterimagelive.com"></script>-->
                <!-- Include Lightbox (Production, Disable scrolling) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.packed.js?scroll=disabled"></script>-->
                <!-- Include Lightbox (Production, colorBlend forced support) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.packed.js?colorBlend=true"></script>-->
                <!-- Include Lightbox (Production, No linkback + Disable scrolling) -->
                <!--<script type="text/javascript" src="js/jquery.lightbox.packed.js?show_linkback=false&amp;scroll=disabled"></script>-->


5. I then placed the required line of code for MediaBlock in the body of the php page.
PHP Formatted Code
<?php @readfile('http://www.website.com/gallery/mediaBlock.php?g2_itemId=15&limit=15&useThumb=1&column=3');?>


6. I then made a few changes to line 557 in the mediaBlock.php file. The original looks like this:
PHP Formatted Code
$display = '<a href="' . getLink($item) . '?phpMyAdmin=3t6YV1OfVqcEFfJg28R908aqSdc">'. $img .'</a>'."\n";


I then change line 557 to read like this:
PHP Formatted Code
$display = '<a rel="lightbox-group" title="Download This Photo" href="' . getView($item) . '?phpMyAdmin=3t6YV1OfVqcEFfJg28R908aqSdc">'. $img .'</a>'."\n";


The rel="lightbox-group" tells the browser to use the lightbox script. The title is the title of the download link. and getView is changed from getLink so it loads the only the image instead of a page to view the image.

The end result is an embedded album from gallery2 in a php file that allows you to view (in that slick lightbox way) and download the the images in the gallery without leaving the page.

Here is an example page: http://www.afterimagelive.com/mediablock-test.php


 
Quote
suprsidr
 January 19 2009 21:31 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

Nice job.
You could add a $_REQUEST variable or 2 to allow your page to be dynamic.

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: cyfroice
 January 19 2009 21:44 PM  


Thanks!

I just want to say thank you for this great script.

I must admit I am a little new to PHP and Gallery 2. What exactly would a $_REQUEST variable do?

I also have one other quick question. With your script is to display part of the thumbnails but the user would have a way to scroll through the rest in the album?

For example: Let's say I had 40 photos but only 20 thumbnails would fit on the page but I still want people to be able to view all 40 photos. In the script I would set it up to limit it to display only 20 photos but is there a way to have it then put a link under the grid that might say something like "next group" that would remove the first 20 photos and display the second group of 20 photos?

Thanks


 
Quote
Anonymous: cyfroice
 January 19 2009 21:47 PM  


Oops, it looks like I wasn't quite clear after I re-read the post. When I said that I wanted to display 20 photos and then have a link that would replace the first 20 photos with the second 20 photos I meant to say 20 thumbnails, not photos.


 
Quote
suprsidr
 January 19 2009 21:57 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

You could add say the g2_itemId so when you call your page http://www.afterimagelive.com/mediablock-test.php?g2_itemId=218
where 218 would be the id of the album you want to display.
Basically passing the g2_itemId onto the mediaBlock @readfile call.

PHP Formatted Code

<?php
isset($_REQUEST['g2_itemId'])?$id=$_REQUEST['g2_itemId']:$id=15; //15 would be your default albumId
@readfile('http://www.website.com/gallery/mediaBlock.php?g2_itemId='.$id.'&limit=15&useThumb=1&column=3');
?>
 


In the script I would set it up to limit it to display only 20 photos but is there a way to have it then put a link under the grid that might say something like "next group" that would remove the first 20 photos and display the second group of 20 photos?

Sorry, this script was designed to "simply display gallery content outside of gallery" not to replace gallery.
So no offset support (yet).

-s


There will always be...
 
Profile Email Website
Quote
vstheworld
 February 13 2009 08:15 AM  
Forum Newbie
Newbie

Status: offline

Registered: 02/13/09
Posts: 5

So if I'm understanding this process correctly I would be linking to the php file I've created which would in turn call up MediaBlock.php to display on my site? Would the link just go to the newly created php file (that has just the script and read command in the body)? Sorry if these are obvious questions I'm a bit new at this and can't as of yet get the lightbox portion to work.

Thanks for any info!


 
Profile Email
Quote
suprsidr
 February 13 2009 08:33 AM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

You don't need to create any new pages to display mediaBlock, any php enabled page will do.
You just need to include the lytebox javascript in the head of that page and make the change to mediaBlock line 557.

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: Jeremy
 February 14 2009 00:08 AM  


So I have a feeling that I missing something here. I have MediaBlock called into a div on an html page via ajax. I've edited line 557 in MediaBlock.php and I know that's good because when it's called up and I click on a thumbnail it takes me directly to the image instead of the gallery page. However no matter what page I place the lightbox script in I can't get lightbox to activate. Any ideas where to look or what to look for?

Thanks again!


 
Quote
suprsidr
 February 14 2009 05:31 AM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

You have to re-initiate your lightbox script after every ajax call.

I ran into the same problem with tooltips. After every ajax call, I have to "re-tip" my document.

-s


There will always be...
 
Profile Email Website
Quote
vstheworld
 February 15 2009 21:36 PM  
Forum Newbie
Newbie

Status: offline

Registered: 02/13/09
Posts: 5

Ok, now that makes sense. I've got everything working perfectly, thanks!


 
Profile Email
Quote
Anonymous: cyfroice
 February 17 2009 00:19 AM  


I am having an ajax issue as well. I have this file: http://www.afterimagelive.com/test.php and I am using an ajax script to fetch it into an html page, the code is below:

PHP Formatted Code
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="ajaxpagefetcher.js"></script>
<title>Ajax</title>
</head>

<body text="#FFFFFF" bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<table id="test" border="1" width="100%">
        <tr>
                <td>&nbsp;</td>
        </tr>
</table>

<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("test", "test.php", true)
</script>

</body>

</html>


The problem is that it disables the lightbox javascript and I can't for the life of me figure out how to get it to work. You spoke of re-tipping your document in your previous post. What is re-tipping and where would I place the line of code?

Thanks again for this code!


 
Quote
suprsidr
 February 17 2009 04:25 AM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

Your test page works fine for me.
"retipping" is for my page, for adding tooltips to my newly loaded elements.
Basically your lytebox script traverses the DOM and claims all the elements marked with your special attribute.
But you must call this script to re-execute after each successful ajax call to "claim all the new elements".

-s


There will always be...
 
Profile Email Website
Quote
Anonymous: Sion
 September 19 2009 10:59 AM  


After a bit of fiddling, i got this to work.
however, i no longer have the watermark on the image.

if you look at: www.grahamsweet.com/2008/sion.php
you can see the top 4 images use the standart popup setting, and they display the watermark,
the bottom 4 use lightbox, and these donot.

Is there any way to have lightbox popups display watermarks?
Cheers.
Sion.


 
Quote
Content generated in: 0.63 seconds
New Topic Post Reply



 All times are PST. The time is now 11:30 PM.
Normal Topic Normal Topic
Locked Topic Locked Topic
Sticky Topic Sticky Topic
New Post New Post
Sticky Topic W/ New Post Sticky Topic W/ New Post
Locked Topic W/ New Post Locked Topic W/ New Post
View Anonymous Posts 
Anonymous users can post 
HTML Allowed 
Censored Content