Show Posts
1
Mods & Plugins (Releases & Support) / [MOD] Reflection below all thumbs on every page (like youtube)
« on: February 13, 2008, 08:29:15 AM »
This will add a reflection under all your 4images thumbs.. kinda neat..
Example image below.
Please read this whole post before editing so you know all the options.
Files Edited:
function.php
header.html
style.css
--------------------------------
First open function and find
Change too
---------
Now download the attachment and unzip and upload (reflection.js) to your root (public_html)
Log into your admin and edit templates
Now open style.css
Add
Open header.html
Add
Visit your index.php and see if it works.. it will work on every page that shows thumbs (including random image and any extra code you added that shows thumbs)
Extra options
Varying the Height
You can vary the height of a reflection by adding rheight followed by the desired height in percent to the CSS class list.
To use a reflection 33% the height of the original image:
class="reflect rheight33"
Tip: Especially for larger photographs, small reflections work really well (try 10%).
Varying the Opacity
You can vary the opacity of a reflection by adding ropacity followed by the desired opacity in percent to the CSS class list.
To use a reflection with 30% opacity:
class="reflect ropacity30"
You can combine these two options. To create a 80% height 40% opacity reflection use:
class="reflect rheight80 ropacity40"
Scripting Reflections
If you want tons of flexibility, use scripted reflections. You can make your reflections respond to user actions (e.g. changing the reflection opacity when the image is hovered over) or add reflections to scripts such as Lightbox.
Reflection.add(image, options);
Adds or modifies a reflection to an image using Javascript. If the image is already reflected but the specified opacity or height has changed, the reflection will be changed accordingly.
image should be an image element.
options can contain a value for opacity or height. Both values should be between 0 and 1.
Reflection.add(document.getElementById("ohboy"), { height: 3/4, opacity: 2/3 });
Reflection.remove(image);
Removes the reflection from an image.
Example image below.
Please read this whole post before editing so you know all the options.
Files Edited:
function.php
header.html
style.css
--------------------------------
First open function and find
Code: [Select]
$thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" />";Change too
Code: [Select]
$thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." class=\"reflect rheight33\" alt=\"".$image_name."\" />";---------
Now download the attachment and unzip and upload (reflection.js) to your root (public_html)
Log into your admin and edit templates
Now open style.css
Add
Code: [Select]
img { border: 0; }Open header.html
Add
Code: [Select]
<script type="text/javascript" src="reflection.js"></script>At the very top line.Visit your index.php and see if it works.. it will work on every page that shows thumbs (including random image and any extra code you added that shows thumbs)
Extra options
Varying the Height
You can vary the height of a reflection by adding rheight followed by the desired height in percent to the CSS class list.
To use a reflection 33% the height of the original image:
class="reflect rheight33"
Tip: Especially for larger photographs, small reflections work really well (try 10%).
Varying the Opacity
You can vary the opacity of a reflection by adding ropacity followed by the desired opacity in percent to the CSS class list.
To use a reflection with 30% opacity:
class="reflect ropacity30"
You can combine these two options. To create a 80% height 40% opacity reflection use:
class="reflect rheight80 ropacity40"
Scripting Reflections
If you want tons of flexibility, use scripted reflections. You can make your reflections respond to user actions (e.g. changing the reflection opacity when the image is hovered over) or add reflections to scripts such as Lightbox.
Reflection.add(image, options);
Adds or modifies a reflection to an image using Javascript. If the image is already reflected but the specified opacity or height has changed, the reflection will be changed accordingly.
image should be an image element.
options can contain a value for opacity or height. Both values should be between 0 and 1.
Reflection.add(document.getElementById("ohboy"), { height: 3/4, opacity: 2/3 });
Reflection.remove(image);
Removes the reflection from an image.