• [MOD] Reflection below all thumbs on every page (like youtube) 4 0 5 1
Currently:  

Author Topic: [MOD] Reflection below all thumbs on every page (like youtube)  (Read 36678 times)

0 Members and 1 Guest are viewing this topic.

Offline zoomos

  • Newbie
  • *
  • Posts: 14
    • View Profile
[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
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.
« Last Edit: August 08, 2008, 10:57:33 AM by mawenzi »

Offline nobby

  • 4images Guru
  • *******
  • Posts: 2.873
    • View Profile
Re: [mod] Reflection below all thumbs on every page (like youtube)
« Reply #1 on: February 13, 2008, 08:37:40 PM »
Where can one viewing  :?:

Offline nobby

  • 4images Guru
  • *******
  • Posts: 2.873
    • View Profile
Re: [mod] Reflection below all thumbs on every page (like youtube)
« Reply #2 on: February 13, 2008, 09:23:14 PM »
Thanks Ivan
イワンのおかげで  :wink:

Offline kai

  • Administrator
  • Addicted member
  • *****
  • Posts: 1.412
    • View Profile
    • 4images - Image Gallery Management System
Re: [mod] Reflection below all thumbs on every page (like youtube)
« Reply #3 on: February 14, 2008, 09:24:30 AM »
Nice one!
Your first three "must do" before you ask a question:
1. Forum rules
2. FAQ
3. Search

Offline maineyak

  • Newbie
  • *
  • Posts: 30
    • View Profile
Re: [mod] Reflection below all thumbs on every page (like youtube)
« Reply #4 on: March 03, 2008, 10:48:00 PM »
Cool, it adds a little style...

Offline † manurom

  • Full Member
  • ***
  • Posts: 227
    • View Profile
    • manurom's 4images templates
More Cosmetics For Your Thumbnails
« Reply #5 on: May 10, 2008, 01:02:22 PM »
Hello, all;
from http://www.netzgesta.de/, there are more cosmetics changes you can apply to your thumbnails.

You only have to download the scripts, free for use in non-commercial or private websites. See "licence.txt" attached, and be fair and respect it.

An exemple of you can do:

Example: to do the Bevel Effect, download bevel.js here: http://www.netzgesta.de/bevel/.
Upload bevel.js to your template directory.

Open your header.html file, like said above, and insert before </head>:
Code: [Select]
<script type="text/javascript" src="{template_url}/bevel.js"></script>
As also said above, open the file includes/functions.php and change at the line #464:
Code: [Select]
$thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
to:
Code: [Select]
$thumb = "<img src=\"".$file_src."\" class=\"bevel noshade\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
and line #470:
Code: [Select]
$thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
to:
Code: [Select]
$thumb = "<img src=\"".$file_src."\" class=\"bevel noshade\" border=\"".$config['image_border']."\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
That's all. Look at http://www.netzgesta.de/bevel/, many variations are there described.


Following that example, you can apply one of the other scripts:

But please, must of all, respect their work, keep their copyrights, and whynot, send them a feedback if you enjoy their work! :P

Please read the licence attached.

Enjoy!

Offline kandr

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #6 on: November 21, 2008, 01:19:31 AM »
DONT WORK in Google Chrome!

Offline Nicky

  • Administrator
  • 4images Guru
  • *****
  • Posts: 3.195
    • View Profile
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #7 on: November 21, 2008, 07:05:07 PM »
google chrome is still in beta stage
maybe is that the reason  :mrgreen:
cheers
Nicky
Your first three "must do" before you ask a question ! (© by V@no)
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

nicky.net 4 4images
Signature stolen from mawenzi

Offline 5degrees

  • Newbie
  • *
  • Posts: 24
    • View Profile
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #8 on: November 22, 2008, 10:06:10 PM »
I am very interested in the 'instant' effect and would like to use this as the thumbnail default.

Can someone please advise me of what code would be necessary to facilitate this function?

Regards, Ian

Offline michael1234

  • Pre-Newbie
  • Posts: 6
    • View Profile
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #9 on: May 18, 2009, 06:52:43 PM »
kann es sein, dass das mod bei 1.7.7 version nicht funktioniert?

Offline fares

  • Newbie
  • *
  • Posts: 27
    • View Profile
    • موقع العاب
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #10 on: June 11, 2009, 03:46:50 AM »
Did not work with me

I worked all the steps
What is the problem

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #11 on: June 16, 2009, 06:24:07 PM »
DONT WORK in Internet Explorer


gruك

Offline Sebas Bonito

  • Sr. Member
  • ****
  • Posts: 271
  • Sebas Bonito
    • View Profile
Re: More Cosmetics For Your Thumbnails
« Reply #12 on: June 22, 2009, 01:01:14 AM »
Does this work under 1.7.7? It sounds really cool... but there are a few who are saying it doesn't work. Any crack out there, who can validate this?

Offline Sebas Bonito

  • Sr. Member
  • ****
  • Posts: 271
  • Sebas Bonito
    • View Profile
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #13 on: June 23, 2009, 01:14:46 PM »
kann es sein, dass das mod bei 1.7.7 version nicht funktioniert?
Bei mir lنuft auch GAR nichts... weder das eine Script, noch das andere.
Getestete Browser: Firefox, Safari, Opera und IE (in der aktuellsten Version).
Sonst ist alles richtig eingetragen... doch irgendwo muss es einen Fehler geben.

Offline chamkani.net

  • Jr. Member
  • **
  • Posts: 90
  • Moxet Khan
    • View Profile
    • Pukhtoogle
Re: [MOD] Reflection below all thumbs on every page (like youtube)
« Reply #14 on: July 01, 2009, 02:35:56 PM »
Sir i apply this effect on default template and all done successfully, but i have Iceberge Theme, and i want to apply this, i done all thing but not working.. check url
http://chamkani.net/malgaree/
Digital Marketing Specialist

 

Post your comments here