http://tinyurl.com/y98k3sm
Usage: readme.txt
Tutorial, how to use that blade.
Create a new test page in RazorCMS.
Put [copy and paste] inside that code:
- Code: Select all
<p>
<a href="images/razor_editor.jpg" rel="lytebox[editors]" title="Razor">Razor</a><br />
<br />
<a href="images/fckeditor.jpg" rel="lytebox[editors]" title="FCKeditor">FCKeditor</a><br />
<br />
<a href="images/razor_editor.jpg" rel="lyteshow[editors]" title="Razor">Razor</a><br />
<br />
<a href="images/fckeditor.jpg" rel="lyteshow[editors]" title="FCKeditor">FCKeditor</a><br />
<br />
<a href="http://www.geuzen.org/cgi-bin/shmoogle/shmoogle_form.cgi" rel="lyteframe" rev="width: 800px; height: 600px; scrolling: yes;" title="Search Shmoogle">Shmoogle Search</a>
<br />
<br />
<iframe height="600" width="700" src="http://127.0.0.1:4001/razor/gb/index.php" title="GuestBook" ></iframe>
<br />
<a href="http://127.0.0.1:4001/razor/gb/index.php" rel="lyteframe[guestbook]" rev="width: 800px; height: 450px; scrolling: yes;" title="GuestBook"><br />
GuestBook</a><br />
<br />
<a href="http://127.0.0.1:4001/razor/blocks/index.php" rel="lyteframe[comments]" rev="width: 800px; height: 600px; scrolling: yes;" title="Comments">Comments</a><br />
<br />
<iframe height="400" width="700" src="http://127.0.0.1:4001/razor/blocks/index.php" title="Comments"></iframe>
<br />
<br />
Note: When using the "Lyteframe" feature, the REV attribute is used to control the width, height, and scrolling of the window. If the REV attribute is omitted, then by default width/height is set to 400px and scrolling is set to auto.</p>
<p>
</p>
<p>
Lytebox can be configured by editing the main JavaScript file, lytebox.js. Shown below are the lines in lytebox.js which are configurable. The comments (text following the "//" characters) are fairly self-explanatory, so I won't go into any further detail.</p>
<p>
/*** Start Global Configuration ***/</p>
<p>
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold<br />
this.hideFlash = true; // controls whether or not Flash objects should be hidden<br />
this.outerBorder = false; // controls whether to show the outer grey (or theme) border<br />
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)<br />
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay<br />
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number<br />
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions<br />
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc. this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...</p>
<p>
/*** End Global Configuration ***/</p>
<p>
/*** Configure Slideshow Options ***/<br />
this.slideInterval = 10000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)<br />
this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide<br />
this.showClose = true; // true to display the Close button, false to hide<br />
this.showDetails = true; // true to display image details (caption, count), false to hide<br />
this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide<br />
this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open<br />
this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked<br />
this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked</p>
<p>
/*** End Slideshow Configuration ***/</p>
<p>
<span class="red">iFrames:</span> If you plan to use Lytebox in an iFrame environment, then you need to include <span class="code">lytebox.css</span> in the parent document, while including <span class="code">lytebox.js</span> in the iFrame document.</p>
Hint:
Now, create 'images' folder with sample photos razor_editor.jpg and fckeditor.jpg in your razorcms directory:
Test your link: http://www.mysite.org/images/razor_editor.jpg
If you can see your photo - ok.
Download guestbook script from that link:
http://www.jemjabella.co.uk/downloads/BellaBook.zip
Read carefuly all manual for that Bellabook script.
Create 'gb' folder in RazorCMS directory near 'images'.
Unpack Bellabook.zip inside 'gb' folder.
Configure BellaBook prefs.php file: password, directory...etc.
Change on that test page my own link:
http://127.0.0.1:4001/razor/gb/index.php
on
http://mysite.org/gb/index.php
Save that page in RazorCMS, and test, how it works.
Look, how that blade works in single frame, and without frame,
using Lytebox.
Do the same with Bella blocks script, and change that link
http://127.0.0.1:4001/razor/blocks/index.php
on your own directory, on your test page.
Regards
