Free mootools rokbox popup hack, DIY to an amazing ajax image enlargement box |
  |
Free mootools rokbox popup hack, DIY to an amazing ajax image enlargement box |
 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 
-------------------- |
 |
 
|
|
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
|
|
|
|
|
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. -------------------- |
|
|
|
|
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. |
|
|
|
|
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.)
-------------------- |
|
|
|
|
| Lo-Fi Version | Time is now: 20th May 2013 - 12:59 PM |
