[Mod] DropShadow on thumbnails

[getcom]

Dropdown shaddows for IE and Firefox.

Add this to the end of your style.css file

.ds_right   { background: url(images/ds_right.jpg) no-repeat }
.ds_corner  { background: url(images/ds_corner.jpg) no-repeat center }
.ds_bottom   { background: url(images/ds_bottom.jpg) no-repeat left  }

The code for your content in your template files is:

<table border="0" cellspacing="0" cellpadding="0"><tr><td>

{thumbnail} NOTE THIS CAN BE ANY CONTENT NOT JUST {thumbnail}. TRY IT WITH {image} OR ANYTHING

</td><td valign="top" width="7" class="ds_right" ></td></tr><tr height="7"><td align="left" height="7" class="ds_bottom" ></td><td width="7" height="7" class="ds_corner"></td></tr></table>

Download the images. You can change these to something else if you wish

d_shaddow_images.zip

Unzip them to your template/image folder.


Now all you have to do is add the above table to your template files anywhere you want a dropshaddow.

Hope this helps

[police22]

Just installed this little mod on my site.. works pretty good..
Thanks Harry 

[toroslar]

I am sorry ... I did not understand this subject. I did them but not see. who can tell me all thing to do by order, plesase ...I am happy İf you send instructions to my e-mail adress ...thanks..
my e-mail adres : info@toroslar.org

[IzyB]

Is the original Mod not located in this thread? This thread just isn't making sense to me...there doesn't really seem to be an actual full mod listed here. Can someone post the mod entirely please? Thank you!

Tina

[V@no]

I dont know how could u miss the very first message of this topic...

[IzyB]

I dont know how could u miss the very first message of this topic...

No, I did see the first message and did try it just as it was stated and nothing worked. I do have IE6. I tried for 30 mins.+ to get it to work last night.

[V@no]

on the first page it also says what to change in functions.php

[JensF]

small update:

it was changed in functions.php
Change

Code: [Select]

    $thumb = "<img


into

Code: [Select]

    $thumb = "<img class=\"pic\"

 

When i do this, i become a blank page....can anyone help me??

[bibabobu]

Salut,

perhaps i am too stupid. I have read this whole MOD thread for three times. But i don't know what i am doing wrong.
I added the pics code to the style.css like explanation of the first posting.
Also i added the following code to my functions.php in one line.

Code: [Select]

$thumb = "<img src=\"".$file_src."\" ".(($show_link) ? "" : "onClick=\"alert('".$lang['members_only']."'); \"")."border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" />";
But i cannot see any dropshadow on my thumbnails.
What i am doing wrong or did i forget something to add?
 

[Anderson]

I inserted the 1st. code inside style.css and I changed functions.php but it didn't work out...
Did I miss anything?

[getcom]

Hi Anderson

I think Harry's mod only works with IE. Mine (top of page 3) works for all browsers and you can also have a dropdown shadow on anything you like, not just the images.

Getcom

[jojomart]

Hey guys, I found a javascript that will make your images have a drop shadow in both IE and FireFox - all you have to do is put it in the header.html file before the closing </head> code:

Code: [Select]

<script type="text/javascript">

var gradientshadow={}
gradientshadow.depth=6 //Depth of shadow in pixels
gradientshadow.containers=[]

gradientshadow.create=function(){
var a = document.all ? document.all : document.getElementsByTagName('*')
for (var i = 0;i < a.length;i++) {
if (a[i].className == "shadow") {
for (var x=0; x<gradientshadow.depth; x++){
var newSd = document.createElement("DIV")
newSd.className = "shadow_inner"
newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth)
if (a[i].getAttribute("rel"))
newSd.style.background = a[i].getAttribute("rel")
else
newSd.style.background = "black" //default shadow color if none specified
document.body.appendChild(newSd)
}
gradientshadow.containers[gradientshadow.containers.length]=a[i]
}
}
gradientshadow.position()
window.onresize=function(){
gradientshadow.position()
}
}

gradientshadow.position=function(){
if (gradientshadow.containers.length>0){
for (var i=0; i<gradientshadow.containers.length; i++){
for (var x=0; x<gradientshadow.depth; x++){
  var shadowdiv=document.getElementById("shadow"+i+"_"+x)
shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", gradientshadow.create, false)
else if (window.attachEvent)
window.attachEvent("onload", gradientshadow.create)
else if (document.getElementById)
window.onload=gradientshadow.create

</script>
You can see it in action at my site http://www.wallpaper-downloads.info

Joanne

[Boatswain]

just use same code in templates from templates/<yourtemplate>/media/ folder

Hello,

Dropshadow on thumbs is working fine but I can't get it to work for the picture.
What and where exactly do I have to add to the templates?

Quote:    edit /templates/<yourtemplate>/media/jpg.html
              add this class:
              class="pic"

Template jpg.html:

<!-- Template file for JPG Files -->
<img src="{media_src}" border="0" alt="{image_name}"{width_height} /><br />

What do I have to add/change in this template ?

thanks

[mawenzi]

... this should work ...

Code: [Select]

<span class="pic"><img src="{media_src}" border="0" alt="{image_name}"{width_height} /></span>


[Boatswain]

... this should work ...

Code: [Select]

<span class="pic"><img src="{media_src}" border="0" alt="{image_name}"{width_height} /></span>


No, still no drop shadow