4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
July 24, 2016, 08:45:48 AM

Login with username, password and session length
Search:     Advanced search
4images is now on facebook. Click here and become a fan!
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Requests & Discussions) (Moderators: mawenzi, Rembrandt)
| | |-+  bildanzeige wenn mit mauszeiger über thumbnail?
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: «« « 1 [2] Print
Author Topic: bildanzeige wenn mit mauszeiger über thumbnail?  (Read 17556 times)
nobby
4images Guru
*******
Offline Offline

Posts: 2689

Thank You
-Given: 6
-Receive: 53


View Profile
« Reply #15 on: June 21, 2009, 10:07:19 PM »

Hallo,

hast recht, zu groß Wink

Im ACP (Admin Control Panel)

nobby
Logged
horse
Pre-Newbie

Offline Offline

Posts: 2

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #16 on: June 22, 2009, 01:47:35 PM »

"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'300\' height=\'225\'>",

Gibt es auch eine Möglichkeit die Größe in Prozentpunkten anzugeben, damit es nicht zu Verzerrungen bei Hochkantbildern kommt?
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 893

Vienna


View Profile WWW
« Reply #17 on: June 22, 2009, 02:29:36 PM »

Hi!
...
Gibt es auch eine Möglichkeit die Größe in Prozentpunkten anzugeben, damit es nicht zu Verzerrungen bei Hochkantbildern kommt?
sicher,bspl.:: width=\"100%\"

wenn ich meine meinung dazu sagen darf, dieser änderung kann ich nichts abgewinnen.
wenn man mit der maus rüberfährt pop das bild unkontrolliert auf, das heißt es wird vom browser irgenwo immer abgeschnitten.

warum baut ihr euch das nicht ein: http://www.4homepages.de/forum/index.php?topic=20461.msg111200#msg111200
damit habt ihr alle probleme vom tisch.

mfg Andi
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Tino23
Full Member
***
Offline Offline

Posts: 180

Thank You
-Given: 16
-Receive: 4


View Profile WWW
« Reply #18 on: August 28, 2010, 11:11:27 AM »

http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866

Hat da einer noch eine Idee dazu?

23.09.2010 keiner  Sad  Question
« Last Edit: September 23, 2010, 09:28:27 PM by Tino23 » Logged
x23piracy
Sr. Member
****
Offline Offline

Posts: 420

Thank You
-Given: 48
-Receive: 40


View Profile WWW
« Reply #19 on: November 05, 2010, 06:50:11 PM »

Hi,

ich versteh euer Problem nicht.
In der wz_tooltip stellt ihr die Größe für den Tooltip ein:

1
// Tooltip width; 0 for automatic adaption to tooltip content; < -1 (e.g. -240) for a maximum width for that automatic adaption

und dann die Bildeinbindung in der functions:

1
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'100%\'>",

die 100% orientieren sich an der wz_tooltip width...

Jetzt braucht ihr nur noch an der breite in der wz_tooltip zu drehen und bestimmt damit die Vorschaubildbreite.


Die besten Lösung wäre es den Code:

1
2
3
4
5
6
7
8
if (!get_file_path($image_row['image_media_file'], "media", $image_row['cat_id'], 0, 0)) {
        $image_tip_file = ICON_PATH."/".get_file_extension($image_row['image_media_file']).".gif";
      }else {
        $image_tip_file = get_file_path($image_row['image_media_file'], "media", $image_row['cat_id'], 0, 1);
      }
      $image_info = @getimagesize($image_tip_file);
      $width = $image_info[0];
      $height = $image_info[1];

zu erweitern um ungefähr sowas:
1
2
3
4
5
6
if width > height then
  width = screenwidth / X
  heigth = ''
else
  heigth = screenheigth / X
  width = ''

ich kann das aber leider nicht verwertbar in php umsetzen...


EDIT:

Iam sure that is not working but here it is may someone improves it Smile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if(isset($HTTP_COOKIE_VARS["users_resolution"]))
$screen_res = $HTTP_COOKIE_VARS["users_resolution"];

if($width > $heigth)
 {
$width  = ($screen_res / 10) * 3;
$heigth = '';
 }

else
 
 {
$heigth  = ($screen_res / 10) * 5;
$width = '';
 }


Gruß Jens
« Last Edit: November 05, 2010, 07:18:52 PM by x23piracy » Logged


Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--
Tino23
Full Member
***
Offline Offline

Posts: 180

Thank You
-Given: 16
-Receive: 4


View Profile WWW
« Reply #20 on: November 07, 2010, 07:19:49 PM »

Oder gleich das eigentliche Thumbnail nehmen für die Anzeige. Dann sind auch die Ladezeiten kleiner... http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 893

Vienna


View Profile WWW
« Reply #21 on: November 07, 2010, 07:38:29 PM »

Oder gleich das eigentliche Thumbnail nehmen für die Anzeige. Dann sind auch die Ladezeiten kleiner....
bei deiner vorgehensweise wird das bild nur im browser verkeinert und das seitenverhältniss stimmt dann auch nicht immer.
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Tino23
Full Member
***
Offline Offline

Posts: 180

Thank You
-Given: 16
-Receive: 4


View Profile WWW
« Reply #22 on: November 07, 2010, 07:54:47 PM »

Also die Seitenverhältnisse stimmen bei mir, hab ja width und heightt weg gelassen, so das dass Thumbnailbild in seiner vollen Größe gezeigt wird. Hatte da auf meiner Seite keine Probleme damit.
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 893

Vienna


View Profile WWW
« Reply #23 on: November 07, 2010, 08:00:34 PM »

.... hab ja width und heightt weg gelassen, ...
dann ist alles klar....
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
x23piracy
Sr. Member
****
Offline Offline

Posts: 420

Thank You
-Given: 48
-Receive: 40


View Profile WWW
« Reply #24 on: November 09, 2010, 02:55:13 AM »

Hi,

found and good Smile


CSS + Javascript solution to dynamically resize images while maintaining aspect ratio
Saturday, 12 Dec 2009
I couldn’t find a good script for creating thumbnails with CSS + Javascript, so I wrote one. The objective is to:

1. Center the images.
2. Resize the images to a predefined thumbnail width and height.
3. Do this on the fly to avoid server-side rendering of thumbnails.

You can check out a demo of this script live on this site in the photos section. Or live on Fotomoto’s homepage.


First, the CSS required. You can alter the width and height to the desired width and height of your thumbnails.
1
2
3
4
5
6
7
8
9
10
11
12
13
.image_outer {
overflow:hidden;
border:1px solid #dedede;
}
.image_inner {
padding:0px;
margin:0px;
position:relative;
overflow:hidden;
}
.image_outer .image_inner img {
border:0px;
}
Second, the XHTML markup looks something like this:

1
2
3
4
5
<div class="image_outer">
    <div class="image_inner">
        <img class="resizeMe" src="someUrl" alt="my image" />
   </div>
</div>
The logic for this set-up: 1. The image sits inside a relatively positioned container (.image_inner). The container is set (by Javascript) to a set width / height, which is the thumbnail size. 2. The relatively positioned container sits inside an outer container (.image_outer) that prevents the inner container from losing its position in the vertical layout of the page.

The javascript to render the images is simple. Here’s sample code using jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function resizeImages(classToResize,w,h) {
var imgs = $("."+classToResize);

jQuery.each(imgs, function() {
                 // set container dimensions
$(this).parent().parent().height(h);
$(this).parent().parent().width(w);
$(this).parent().height(h);
$(this).parent().width(w);

                // get current image dimensions
var cur_h = imgs[i].height;
var cur_w = imgs[i].width;

                // is aspect ratio wider or taller than the thumbnail box?
if ((cur_h/cur_w)>(h/w)) {
$(this).width(w);
var diff = (imgs[i].height - h)/2;
$(this).parent().parent().scrollTop(diff);
} else {
$(this).height(h);
var diff = (imgs[i].width - w)/2;
$(this).parent().parent().scrollLeft(diff);
}
}
}
The script broken down step-by-step:
1. Query the images by the class name.
2. The for loop iterates through all of the images.
3. The resize logic is based on the aspect-ratio of the images. If the aspect ratio of the original image is greater than the desired thumbnail size, the scroll position of the container is set accordingly to center the image and the image’s width is set to the desired thumbnail size. Alternately, if the aspect ratio is equal to or less than the original image, the scroll position and image height are set accordingly to center the image.

Note: This function should be called onLoad to ensure that all images are loaded when the script executes; this can be done in jQuery using a construction like $(document).ready(function() { resizeImages(‘resizeMe’,300,200); });

Logged


Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--
Jinjo52
Pre-Newbie

Offline Offline

Posts: 8

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #25 on: December 08, 2010, 11:58:32 PM »

Hi super Sache würde diesen Mod auch gern verwenden mit der aktuellen version von 4Images allerdings geht es nicht habe alles wie beschrieben eingebaut.Jemand eine anhung was verändert werden muss?
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 78

Neverdie


View Profile
« Reply #26 on: August 09, 2011, 04:21:37 PM »

so leute, ich muss euch sagen ihr seid genies! Mr. Green
ein bisschen mawenzi, ein bisschen ivan und noch ein ganz klein wenig eigener hirnschmalz und es kommt doch tatsächlich was ECHT COOLES und funktionierendes dabei heraus! klasse! Mr. Green

und so geht's:

1. tooltip von ivan ganz normal einbauen

2. suche in includes/functions.php

1
2
$site_template->register_vars(array(
    "image_id" => $image_row['image_id'],

füge darüber diesen script ein:

1
2
3
4
5
6
7
8
if (!get_file_path($image_row['image_media_file'], "media", $image_row['cat_id'], 0, 0)) {
        $image_tip_file = ICON_PATH."/".get_file_extension($image_row['image_media_file']).".gif";
      }else {
        $image_tip_file = get_file_path($image_row['image_media_file'], "media", $image_row['cat_id'], 0, 1);
      }
      $image_info = @getimagesize($image_tip_file);
      $width = $image_info[0];
      $height = $image_info[1];

suche (ebenfalls in functions.php) nach

1
"image" => get_media_code($image_row['image_media_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link, $detailed_view),

füge danach diesen script ein:

1
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'".$width."\' height=\'".$height."\'>",

dann noch in der thumbnail_bit.html im onmouseover an erster stelle {image_tip} einfügen und schon funktioniert die sache!

das width und hight nicht hardcoded einfügen hat halt den vorteil dass wenn mal ein aufrechtes bild hast, dieses nicht in die länge gezogen sondern in der richtigen auflösung dargestellt wird.

dank euch jungs für die hilfe und bis zum nächsten "problemchen" Mr. Green

ach ja, wer sehen möchte wie es ausschaut kann es sich in meiner bildergalerie auf http://www.hypofun.com mal anschauen.

Dont work with external (remote) images
Logged
Pages: «« « 1 [2] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.383 seconds with 20 queries.