Author Topic: javascript resize?  (Read 8014 times)

0 Members and 1 Guest are viewing this topic.

Offline knsin0

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
javascript resize?
« on: September 20, 2006, 07:37:37 PM »
im using 4image to create wallpaper galleries, many of them have too big resolution, i have been reading about the mods but cant find what i want...

when you click a thumbnail you go to a site where appear the full size image and after all the info and the comments, i want that image resized but without losing resolution, i mean something like this: http://www.fonditos.com/ciencia_ficcion/otros/gato_espacial-01803-1280x960.php?o=11
click the wallpaper-> fullsize
click again->resized without losing resolution
 how can i do this?

Offline tgiokdi

  • Newbie
  • *
  • Posts: 17
    • View Profile
Re: javascript resize?
« Reply #1 on: February 13, 2007, 09:25:34 PM »
I've been looking for this exact thing for ages as well, anyone have any idea on the matter?

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
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 ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline tgiokdi

  • Newbie
  • *
  • Posts: 17
    • View Profile
Re: javascript resize?
« Reply #3 on: March 17, 2007, 02:29:48 AM »
Here's ultimately what I ended up doing, so that a wallpaper on my site wouldn't take up 2 monitors worth of real estate:

in your template's directory, there's a folder /media/  open it, and edit the image media types to:


<a href="{media_src}"><img class="imagesize" src="{media_src}" border="1" alt="{image_name}"/></a><br />

then, in your style.css for your template, add this to the very end:

.imagesize
{
vertical-align: text-top;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #333;
max-width: 750px;
width: expression(this.width > 750 ? 750: true);
}



then you should end up with images that only take up 750 width, and have a link to the 'full' version.  Sadly, you're not saving any bandwidth, because all you're doing is loading the original larger image in a smaller area.  It works for me though. 

disclaimer: I found the code / method via google, so I can't really offer too much help with it.