4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: Harry on April 13, 2003, 08:20:47 PM
-
I thought those thumbnails were made by external software, not by server-side...
anyway I did test the shadow script u sent me, and...well...it kills my Apache server...litterely...
I have asked the author of that class and he'll look into it.
That's funny, I stumbled on this topic, but no-one ever bothered to ask me, the webmaster of the site how it was done. It's interesting to read your discussion about this but the solution is much simpler:
I added the following to the css files (I use many different CSS for every category etc):
.pic {filter: progid:DXImageTransform.Microsoft.Shadow(color=#AF4800,direction=135, strength=5)
progid:DXImageTransform.Microsoft.Alpha(opacity=100);
border: 0;}
Then wherever the picture is defined (cannot find it now, though it was in thumbnail bit but it isn't), I added the class="pic" part, that's all 8)
Will probably only work in IE6+, but who cares, 90 use IE6+ and the rest will never knw it was there...
But I am glad you liked it 8)
-
small update:
it was changed in functions.php
Change
$thumb = "<img
into
$thumb = "<img class=\"pic\"
8)
-
That's funny, I stumbled on this topic, but no-one ever bothered to ask me, the webmaster of the site how it was done.
that was funny! :lol:
I have tryed a few weeks ago do the same thing, but it didnt work at all...I might massed something up...
-
it´s perfect :D
-
it´s perfect :D
Thanks 8)
Just a little assurance for everybody who's interested: the thumbnails themselves are not changed in any way, just the way they are shown on the screen...
Harry
-
Is there a way make shadows half transparent?
-
Is there a way make shadows half transparent?
It's been a while since I played around wity the CSS etc, but I think you can just adjust the Opacity if you use my CSS. (0 =invisible, 100 is fully visible)
Or just do a google search for more possibilities: filter, CSS, shadow..
Hope this helps!
8)
-
I'm a stupid guy, Can you teach me with details ??
:wink:
Is there a way make shadows half transparent?
It's been a while since I played around wity the CSS etc, but I think you can just adjust the Opacity if you use my CSS. (0 =invisible, 100 is fully visible)
Or just do a google search for more possibilities: filter, CSS, shadow..
Hope this helps!
8)
-
Is there a way make shadows half transparent?
Unfortunatelly, MSDN says "no" (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/shadow.asp)
Very nice solution, though, and it works. One remark: only first line is needed, like this:
.pic {filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction=135, strength=2)}
All other lines apply to the whole thumb, and there's no need to make it transparent or blur. You could also try another filter - DropShadow - maybe it looks better for you.
-
@SSL: you are right, the other part is for making the pic transparent (if you would want that).
But you can create a semitransparent look bij choosing a light color
@ Jackie: I probably could, but have no time!
I have expeditions to organise 8) and my site to update... :roll:
I am no coder myself and just read some online tutorials about CSS, so just do a search and try things out..
Good luck,
Harry
-
If you have time, please teach me.
It is because I'm the beginner of 4images.
Thank you again.
:lol:
@SSL: you are right, the other part is for making the pic transparent (if you would want that).
But you can create a semitransparent look bij choosing a light color
@ Jackie: I probably could, but have no time!
I have expeditions to organise 8) and my site to update... :roll:
I am no coder myself and just read some online tutorials about CSS, so just do a search and try things out..
Good luck,
Harry
-
If you have time, please teach me.
It is because I'm the beginner of 4images.
Thank you again.
:lol:
If I would have time I would work on my site first :wink:
Most of my mods are to be found on this forum, so read that first.
If you need more time from me, you will have to buy it by signing up for a Kilimanjaro trip first 8)
Any detailed question I will be glad to help with as you can read in my posts.
Good luck,
Harry
-
Really !!
I search it by myself.
:D
If you have time, please teach me.
It is because I'm the beginner of 4images.
Thank you again.
:lol:
If I would have time I would work on my site first :wink:
Most of my mods are to be found on this forum, so read that first.
If you need more time from me, you will have to buy it by signing up for a Kilimanjaro trip first 8)
Any detailed question I will be glad to help with as you can read in my posts.
Good luck,
Harry
-
Done !!
http://album.barndisco.com
:lol:
Really !!
I search it by myself.
:D
If you have time, please teach me.
It is because I'm the beginner of 4images.
Thank you again.
:lol:
If I would have time I would work on my site first :wink:
Most of my mods are to be found on this forum, so read that first.
If you need more time from me, you will have to buy it by signing up for a Kilimanjaro trip first 8)
Any detailed question I will be glad to help with as you can read in my posts.
Good luck,
Harry
http://
-
Well, that wasn't too difficultafter all, right?
You migjht want to change the color of the shadow as this color (The "color=#AF4800" part)was good for my Kilimanjaro CSS, but it does not match your site.
You can use http://www.boogiejack.com/colorpop.html to find the right code for your color, I would choose someting like #000060 or so...
good luck,
Harry
-
Thanks a lot !!
:lol:
Well, that wasn't too difficultafter all, right?
You migjht want to change the color of the shadow as this color (The "color=#AF4800" part)was good for my Kilimanjaro CSS, but it does not match your site.
You can use http://www.boogiejack.com/colorpop.html to find the right code for your color, I would choose someting like #000060 or so...
good luck,
Harry
-
I tried modifying my functions.php to enable dropshadow but got an error message. Is this script incompatible with the pop up message alert for guests that i've earlier modified?
I would like to hear from people who have installed this script and what they did to make this work.
thanks.
theMoonPrincess
-
small update:
it was changed in functions.php
Change
$thumb = "<img
into
$thumb = "<img class=\"pic\"
8)
I need some help in this department. In functions.php, how would I apply the code above? I must be doing something wrong, because I receive errors when adding the class to:
function get_thumbnail_code($media_file_name, $thumb_file_name = "", $image_id, $cat_id, $image_name = "", $mode = "", $show_link = 1, $open_window = 0) {
global $site_sess, $config;
if (!check_media_type($media_file_name)) {
$thumb = "<img src=\"".ICON_PATH."/404.gif\" border=\"0\" alt=\"\" />";
} else {
if (!get_file_path($thumb_file_name, "thumb", $cat_id, 0, 0)) {
$file_src = ICON_PATH."/".get_file_extension($media_file_name).".gif";
$image_info = @getimagesize($dummy);
$width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
$thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".$image_name."\" />";
}
else {
$file_src = get_file_path($thumb_file_name, "thumb", $cat_id, 0, 1);
$image_info = @getimagesize($file_src);
$width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
$thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" /> "; }
}
if ($show_link) {
if ($open_window) {
$thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";
}
else {
$thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&mode=".$mode : ""))."\">".$thumb."</a>";
}
}
return $thumb;
}
Thanks!
-
woops, thanks V@no. I, too, thought that was it at first, but it wasn't. I finally got it to work...My blind eyes didn't see an extra "<" when I applied the img class=\"pic\" to :
$thumb = "<img class=\"pic\" img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" /> ";
}
}
:oops:
-
woops, thanks V@no. I, too, thought that was it at first, but it wasn't.
hmmm...I thought I deleted my post before u read it...It was a mistake. :oops:
$thumb = "<img class=\"pic\" img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" /> ";
I think it should be like this:$thumb = "<img class=\"pic\" src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".$image_name."\" /> ";
-
Ooh, thanks for posting, Maile808 & V@no! I don't need to post my question anymore. :wink: Thanks!
-
.pic {filter: progid:DXImageTransform.Microsoft.Shadow(color=#AF4800,direction=135, strength=5)
progid:DXImageTransform.Microsoft.Alpha(opacity=100);
border: 0;}
In which file should i add this?
-
In which file should i add this?
style.css
-
This .pic just work fine in IE, but don't work in FireFox. Could someone tell me how to change the css code ?
Thanks.
-
The css code is an Internet Explorer ONLY trick. There is no w3c web standard to do what that Microsoft filter does. Therefore there is no CSS solution
-
Thanks Chris, now I see.
-
Is there way i can add shodow to images instead of thumbnails?
-
just use same code in templates from templates/<yourtemplate>/media/ folder
-
There is a way of adding shadows so they can be seen in firefox as well as IE using html and css. If anyone is interested let me know and I'll post it.
-
There is a way of adding shadows so they can be seen in firefox as well as IE using html and css. If anyone is interested let me know and I'll post it.
why not just post it ;)
-
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 (http://www.rentthisnow.com/images/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
-
Just installed this little mod on my site.. works pretty good..
Thanks Harry :D
-
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
-
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
-
I dont know how could u miss the very first message of this topic...
-
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.
-
on the first page it also says what to change in functions.php
-
small update:
it was changed in functions.php
Change
$thumb = "<img
into
$thumb = "<img class=\"pic\"
8)
When i do this, i become a blank page....can anyone help me??
-
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.
$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?
:roll:
-
I inserted the 1st. code inside style.css and I changed functions.php but it didn't work out...
Did I miss anything?
-
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
-
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:
<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
-
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
-
... this should work ...
<span class="pic"><img src="{media_src}" border="0" alt="{image_name}"{width_height} /></span>
-
... this should work ...
<span class="pic"><img src="{media_src}" border="0" alt="{image_name}"{width_height} /></span>
No, still no drop shadow :(
-
hmmmm maybe
<img src="{media_src}" border="0" alt="{image_name}"{width_height} class="pic" />?
-
hmmmm maybe
<img src="{media_src}" border="0" alt="{image_name}"{width_height} class="pic" />?
Yes, it works now !! :D Thanks again V@no :thumbup:
One more question: Is it possible to make the shadow border wider/thicker ?
Update:
I found it in css add: strength=20
Thanks again :D