Author Topic: bildanzeige wenn mit mauszeiger über thumbnail?  (Read 29614 times)

0 Members and 1 Guest are viewing this topic.

Rembrandt

  • Guest
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #15 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

Offline Tino23

  • Full Member
  • ***
  • Posts: 191
    • View Profile
    • LMJ - Motorsport
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #16 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  :(  :?:
« Last Edit: September 23, 2010, 09:28:27 PM by Tino23 »

Offline x23piracy

  • Sr. Member
  • ****
  • Posts: 420
    • View Profile
    • FHG
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #17 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:

Code: [Select]
// 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:

Code: [Select]
"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:

Code: [Select]
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:
Code: [Select]
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 :)

Code: [Select]
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 »

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!

--(◔̯◔)--

Offline Tino23

  • Full Member
  • ***
  • Posts: 191
    • View Profile
    • LMJ - Motorsport
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #18 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

Rembrandt

  • Guest
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #19 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.

Offline Tino23

  • Full Member
  • ***
  • Posts: 191
    • View Profile
    • LMJ - Motorsport
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #20 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.

Rembrandt

  • Guest
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #21 on: November 07, 2010, 08:00:34 PM »
.... hab ja width und heightt weg gelassen, ...
dann ist alles klar....

Offline x23piracy

  • Sr. Member
  • ****
  • Posts: 420
    • View Profile
    • FHG
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #22 on: November 09, 2010, 02:55:13 AM »
Hi,

found and good :)


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.
Code: [Select]
.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:

Code: [Select]
<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:
Code: [Select]
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); });


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!

--(◔̯◔)--

Offline Jinjo52

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #23 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?

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: bildanzeige wenn mit mauszeiger über thumbnail?
« Reply #24 on: August 09, 2011, 04:21:37 PM »
so leute, ich muss euch sagen ihr seid genies! :mrgreen:
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! :mrgreen:

und so geht's:

1. tooltip von ivan ganz normal einbauen

2. suche in includes/functions.php

Code: [Select]
$site_template->register_vars(array(
    "image_id" => $image_row['image_id'],

füge darüber diesen script ein:

Code: [Select]
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

Code: [Select]
"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:

Code: [Select]
"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" :mrgreen:

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