IPB

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
Free mootools rokbox popup hack, DIY to an amazing ajax image enlargement box
keh
post Oct 3 2008, 07:09 AM
Post #1


Member
**

Group: Members
Posts: 32
Joined: 28-June 06
From: Oslo, Norway
Member No.: 474



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.rocketwerx.com/products/rokbox/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


--------------------
Go to the top of the page
 
+Quote Post
Michael
post Oct 3 2008, 11:03 AM
Post #2


Member
**

Group: Members
Posts: 37
Joined: 22-February 05
Member No.: 6,227



Great info and well written - thanks
Go to the top of the page
 
+Quote Post
Jason-2009
post Oct 4 2008, 09:21 PM
Post #3


Veteran Member
****

Group: Members
Posts: 171
Joined: 22-February 05
Member No.: 8,757



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.


--------------------
Go to the top of the page
 
+Quote Post
will-8057
post Oct 6 2008, 03:42 PM
Post #4


New Member
*

Group: Members
Posts: 1
Joined: 22-February 05
Member No.: 8,057



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.
Go to the top of the page
 
+Quote Post
keh
post Oct 7 2008, 01:49 AM
Post #5


Member
**

Group: Members
Posts: 32
Joined: 28-June 06
From: Oslo, Norway
Member No.: 474



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.)


--------------------
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



Lo-Fi Version Time is now: 24th July 2014 - 07:25 AM