4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: HorrorCrafT on July 01, 2008, 11:36:40 AM



Title: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 01, 2008, 11:36:40 AM
hallo leute!

gibt es ein addon für die 1.7.1 bildergalerie dass wenn man mit der maus über das thumbnail fährt, das bild in originalgröße - also so wie wenn man das thumbnail anklickt - in einem überlagerten fenster angezeigt wird, wie hier z.b.: http://laendlepower.meonnet.com/?sid=af11a71caefa57fa&cmd=album&view=748080 (http://laendlepower.meonnet.com/?sid=af11a71caefa57fa&cmd=album&view=748080)? es soll aber nach wie vor möglich sein, das thumbnail auch anzuklicken um kommentare oder bewertungen zu sehen. finde diese funktion super und würde sie echt gern auch in die 4images bildergalerie einbauen.

bedanke mich für infos!


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: TIMT on July 01, 2008, 11:42:04 AM
Hallo HorrorCrafT

Wie wäre es mit dem...

http://www.4homepages.de/forum/index.php?topic=20461.0 (http://www.4homepages.de/forum/index.php?topic=20461.0)

Gruss
TIMIT


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: mawenzi on July 01, 2008, 11:47:42 AM
@TIMT

... bei deinem Vorschlag ist das Thumbnail mit Link auf die Detailseite nicht mehr klickbar ...
... dazu müsste dann in der thumbnail_bit.html ein Extra-Link auf die Detailseite gesetzt werden ..
... und wie ich HorrorCrafT verstanden habe ... soll das Thumbnail klickbar bleiben ...

@HorrorCrafT

... daher mein Vorschlag ... verwende das neue [TUT] Tooltip in Thumbnails von Ivan ...
... http://www.4homepages.de/forum/index.php?topic=22030.0 ...
... und mit dem Tooltip eben nur das Bild anzeigen lassen ...
... das Thumbnail bleibt so klickbar mit Link auf die Detailseite ...


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 01, 2008, 12:33:46 PM
danke euch für die tipps! mawenzi, weisst du grad zufällig die variable für das image selber? ev. {image} oder so? hab mir das tooltip addon grad mal kurz angeschaut und scheint recht einfach zum einbauen zu sein und wenn es so einfach auch mit dem bild anzeigen klappt, dann wär das echt spitzenmäßig 8) :D


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: mawenzi on July 01, 2008, 12:57:54 PM
... {image} wäre absolut richtig ... etwa so ...

1
onmouseover="Tip('{image}')" onmouseout="UnTip()"


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 01, 2008, 01:24:50 PM
danke, danke für die wie immer so schnelle hilfestellung! werd ich gleich heute abend mal checken und dann berichten.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: ivan on July 01, 2008, 08:11:17 PM
suche mal in /includes/functions.php
1
"thumbnail" => get_thumbnail_code($image_row['image_media_file'], $image_row['image_thumb_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link),

und ersetze durch // gleiches bild wie thumbnail
1
2
"thumbnail" => get_thumbnail_code($image_row['image_media_file'], $image_row['image_thumb_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link),
"thumbnail_tip" => "<img src=\'".THUMB_PATH."/".$image_row['cat_id']."/".$image_row['image_thumb_file']."\'>",

oder // angabe mit höhe und breite -> siehe width und height
1
2
"thumbnail" => get_thumbnail_code($image_row['image_media_file'], $image_row['image_thumb_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link),
"thumbnail_tip" => "<img src=\'".THUMB_PATH."/".$image_row['cat_id']."/".$image_row['image_thumb_file']."\' width=\'100\' height=\'75\'>",

templates/thumbnail.bit sollte etwa so aussehen
1
onmouseover="Tip('{thumbnail_tip}<br />{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()

das einzige was nicht funktioniert ist der {thumbnail_tip} tag, wenn kein thumnail vorhanden ist, wird logischerweise ein leerer
pfad angezeigt. vielleicht können mawenzi oder kurt dieses kleine malör noch aussbessern ;)


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: mawenzi on July 01, 2008, 09:56:26 PM
@ivan

... erst Aufgabenstellung lesen, dann Code posten ... ;)
... es soll nicht das Thumbnail im Tooltip angezeigt werden , sondern das Bild ...
... und in der thumbnail_bit.html wird über die functions.php das Bild mit ... {image} ... dargestellt ...
... der Code für die functions.php braucht also nicht erweitert zu werden ...
... ich meine mein o.g. Code für die thumbnail_bit.html reicht aus ... !


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 02, 2008, 12:07:54 AM
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

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" :mrgreen:

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


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: mawenzi on July 02, 2008, 12:14:24 AM
... ja und der Vorteil gegenüber allen anderen Varianten ... "lightbox" ... usw. ...
... das Thumbnail bleibt 100% klickbar für die Detailseite ... einfach Klasse ...
... das Ergebnis muss ich nun auch mal testen ... ;)
... danke HorrorCrafT für dein Tutorial ...
...
... um die "Vorschaubilder" nun nicht so groß wie auf der Detailseite im Tooltip anzeigen zu lassen ...
... könnte man für die $width und $height noch einen gemeinsamen Faktor kleiner 1 einführen ...
...
... wenn man nun nicht nur Bilder in der Galerie hat, sondern auch pano- html- dwf- und sonstige Dateitypen ...
... so sollte man für "image_tip" noch eine Selektion für eben diese Bilder z.B. jpg durchführen ...
... und die anderen Dateitypen vom Vorschaubild ausschließen ...
...
... ich denke, dass ich da noch ein bischen weiter rumwerkeln werde ... ;)


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 02, 2008, 09:30:00 AM
deine ideen sind gut mawenzi. ich hab nur bilder in meiner gallerie und deshalb ist eine selektion in meinem fall nicht notwendig, macht aber durchaus sinn!
wenn du dir diesbezüglich was überlegt hast, poste es doch bitte hier. super sache und wie immer super support hier! danke!


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: ivan on July 02, 2008, 12:46:26 PM
hallo, dann ist ja schön wenn alles geklappt hat.
darf ich deinen code nehmen und in das tutorial verschieben?

gruss ivan


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 02, 2008, 01:07:44 PM
aber immer gerne doch! welche ehre :oops: :mrgreen:
ev. hat dann mawenzi auch noch etwas zusätzlichen code weil die prüfung auf dateiendung ebenfalls eine gute idee ist.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: HorrorCrafT on July 07, 2008, 02:22:14 PM
noch ein kleiner hinweis bei einem problem das mir aufgefallen ist: der titel einer kategorie darf kein ' (heisst das apostroph?) beinhalten sonst wird kein tooltip angezeigt, sprich kategoriebezeichnungen wie z.b. "Sebastian's Geburtstagsfiese" sollte man anders formulieren oder das ' weglassen. wird vermutlich nicht oft vorkommen, ich hatte aber ein paar kategorien mit ' drin.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: horse on June 21, 2009, 09:56:49 PM
Wie kann man die prozentuale Größe der Bilder einstellen?

Auf unserer Homepage sind die Mauszeigerbilder viel zu groß!

http://www.mercedesclub.de/galeria/index.php

Vielen Dank für die Tipps.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: nobby on June 21, 2009, 10:07:19 PM
Hallo,

hast recht, zu groß :wink:

Im ACP (Admin Control Panel)

nobby


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: horse 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?


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Rembrandt 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


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Tino23 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  :(  :?:


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: x23piracy 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 :)

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


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Tino23 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 (http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866)


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Rembrandt 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.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Tino23 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.


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Rembrandt on November 07, 2010, 08:00:34 PM
.... hab ja width und heightt weg gelassen, ...
dann ist alles klar....


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: x23piracy 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.
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); });



Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Jinjo52 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?


Title: Re: bildanzeige wenn mit mauszeiger über thumbnail?
Post by: Sumale.my 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

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" :mrgreen:

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

Dont work with external (remote) images