Jump to content


Photo

Free mootools rokbox popup hack


  • Please log in to reply
4 replies to this topic

#1 keh

keh

    Member

  • Members
  • PipPip
  • 32 posts
  • Location:Oslo, Norway

Posted 03 October 2008 - 07:09 AM

Want a nice popup window for your image enlargement, with both title and description included in the box? Rokbox is one of the very best scripts around, that use the mootools javascripts library. Even better, you can use it for any type of content, like video and more... Check out the free script here:

Here is the 6 simple steps to make it work on your photostore site (Remember to keep a backup of the files you change):

1. Download the rokbox standalone package here. (It has to be the package marked standalone)

2. Read the install instructions http://www.rocketwer...x/documentation]here[/url], under "Standalone Version" down on the page. (You don't really need it, but will see how easy it is =)

3. Unzip the downloaded package, FTP the folder "rokbox" to the root of your photostore directory.

4. Open the photostore file details.php from the root in notepad or another text editor.

Paste this code:

CODE
<script type="text/javascript" src="rokbox/mootools-release-1.11.js"></script>
<script type="text/javascript" src="rokbox/rokbox.js"></script>
<link href="rokbox/themes/light/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="rokbox/themes/light/rokbox-config.js"></script>


Just after the <head> tag and before <? print($head); ?>.

It should look like this:

CODE
<html>
    <head>
<script type="text/javascript" src="rokbox/mootools-release-1.11.js"></script>
<script type="text/javascript" src="rokbox/rokbox.js"></script>
<link href="rokbox/themes/light/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="rokbox/themes/light/rokbox-config.js"></script>
      <? print($head); ?>


5. Open the photostore file i_details.php in notepad, find this code (Around line 203):

CODE
<a href = "java script:NewWindow('enlarge.php?i=<? echo $photo->id; ?>','LargeView','<? echo $photo_size1[0]; ?>','<? echo $photo_size1[1]; ?>','0','<? echo $scroll; ?>');"><img src="./images/cte.gif" class="photos" alt="<?PHP echo $detail_alt_cte; ?>" title="<?PHP echo $detail_alt_cte; ?>"></a>


Change it to this:

CODE
<a href = "watermark2.php?i=<?php echo $photo->id; ?>" rel="rokbox[<? echo $photo_size1[0]; ?> <? echo $photo_size1[1]; ?>] " title="<?php echo $package->title; ?> :: <?php echo $package->description; ?>"><img src="./images/cte.gif" class="photos" alt="<?PHP echo $detail_alt_cte; ?>" title="<?PHP echo $detail_alt_cte; ?>"></a>


(This is the place we call the rokbox popup, and add the photostore image, title and description in the popup.)

6.

Open your photostore css file, in the folder "styles":

In the top, find:

CODE
body {
    scrollbar-face-color: #DEE3E7;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-shadow-color: #DEE3E7;
    scrollbar-3dlight-color: #D1D7DC;
    scrollbar-arrow-color:  #006699;
    scrollbar-track-color: #EFEFEF;
    scrollbar-darkshadow-color: #98AAB1;
    background-color: #EDF4FC;
    
    }

Replace it with this:
CODE
html {
  height: 100%;
  margin-bottom: 1px;
}


body {
    margin: 0;
    padding: 0;
}


Congrats, you're done!

If you want to use any other popup javascript, like lightbox2(http://www.lokeshdhakar.com/projects/lightbox2/), Thickbox (http://jquery.com/demo/thickbox/), Lytebox (http://www.dolem.com/lytebox/) etc. the above hack should make it easy to use them all if you read it well...

Enjoy and share cool.gif

#2 Michael

Michael

    Member

  • Members
  • PipPip
  • 37 posts

Posted 03 October 2008 - 11:03 AM

Great info and well written - thanks

#3 Jason-2009

Jason-2009

    Veteran Member

  • Members
  • PipPipPipPip
  • 171 posts

Posted 04 October 2008 - 09:21 PM

Really good tute there. Just got my site up and going, so i will have a crack at setting this up over the next week or so.

Thank you for sharing.

#4 will-8057

will-8057

    New Member

  • Members
  • Pip
  • 1 posts

Posted 06 October 2008 - 03:42 PM

Hi,

I have set this up and it works fine in Firefox. Has anyone had issues in IE7. The preview box appears off screen. Also larger portrait images in Firefox do not show the X close icon as it is off screen.

Has anyone else had any problems?

Matt.

#5 keh

keh

    Member

  • Members
  • PipPip
  • 32 posts
  • Location:Oslo, Norway

Posted 07 October 2008 - 01:49 AM

I think the box off screen in IE7 is due to the way the photostore (default) template is built up. I can't reproduce it as I don't have the default photostore template. You might try to ask in the rokbox forum, where you downloaded rokbox, or see if anyone have had the same issue there. I'll try to check it further later today. (BTW. I tested lightbox2 with the photostore template, and it didn't have any alignment problems in ie7.)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users