4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: zoomos on February 13, 2008, 08:29:15 AM

Title: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: zoomos 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.
Title: Re: [mod] Reflection below all thumbs on every page (like youtube)
Post by: nobby on February 13, 2008, 08:37:40 PM
Where can one viewing  :?:
Title: Re: [mod] Reflection below all thumbs on every page (like youtube)
Post by: nobby on February 13, 2008, 09:23:14 PM
Thanks Ivan
イワンのおかげで  :wink:
Title: Re: [mod] Reflection below all thumbs on every page (like youtube)
Post by: kai on February 14, 2008, 09:24:30 AM
Nice one!
Title: Re: [mod] Reflection below all thumbs on every page (like youtube)
Post by: maineyak on March 03, 2008, 10:48:00 PM
Cool, it adds a little style...
Title: More Cosmetics For Your Thumbnails
Post by: † manurom on May 10, 2008, 01:02:22 PM
Hello, all;
from http://www.netzgesta.de/ (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:
(http://www.ami07.info/images/more_thumbs.jpg)

Example: to do the Bevel Effect, download bevel.js here: http://www.netzgesta.de/bevel/ (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/ (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!
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: kandr on November 21, 2008, 01:19:31 AM
DONT WORK in Google Chrome!
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: Nicky on November 21, 2008, 07:05:07 PM
google chrome is still in beta stage
maybe is that the reason  :mrgreen:
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: 5degrees 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
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: michael1234 on May 18, 2009, 06:52:43 PM
kann es sein, dass das mod bei 1.7.7 version nicht funktioniert?
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: fares on June 11, 2009, 03:46:50 AM
Did not work with me

I worked all the steps
What is the problem
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: kubiczek on June 16, 2009, 06:24:07 PM
DONT WORK in Internet Explorer


gruß
Title: Re: More Cosmetics For Your Thumbnails
Post by: Sebas Bonito on June 22, 2009, 01:01:14 AM
Quote from: † manurom on May 10, 2008, 01:02:22 PM
(http://www.ami07.info/images/more_thumbs.jpg)
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?
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: Sebas Bonito on June 23, 2009, 01:14:46 PM
Quote from: michael1234 on May 18, 2009, 06:52:43 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.
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: chamkani.net 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/
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: x23piracy on October 02, 2010, 05:06:46 AM
Quote from: chamkani.net 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/

Hi,

ich versuche auch diesen MOD mit Iceberg zum laufen zu bekommen, es klappt aber leider nicht.
Keine Reflektionen zu sehen, ich finde den Fehler nicht.

Hat das zwischenzeitlich jemand geschafft?


MfG Jens
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: Rembrandt on October 02, 2010, 03:59:43 PM
Quote from: x23piracy on October 02, 2010, 05:06:46 AM
...
Hat das zwischenzeitlich jemand geschafft?


da dieses script vom selben author ist, hilft dir das vielleicht weiter : http://www.4homepages.de/forum/index.php?topic=26792.msg146041#msg146041

du brauchst es nur auf das andere script umzusetzen.
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: haider512 on January 01, 2011, 02:14:38 AM
in which file i need to change class="reflect rheight33"

also how to make it possible that i dont want in percentage the reflection.. i want the defined reflection???
Title: Re: [MOD] Reflection below all thumbs on every page (like youtube)
Post by: Rembrandt on January 01, 2011, 06:51:44 AM
Quote from: haider512 on January 01, 2011, 02:14:38 AM
in which file i need to change class="reflect rheight33"
....

here can you read (http://www.netzgesta.de/reflex)