4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started 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!
-
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
-
@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 ...
-
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
-
... {image} wäre absolut richtig ... etwa so ...
onmouseover="Tip('{image}')" onmouseout="UnTip()"
-
danke, danke für die wie immer so schnelle hilfestellung! werd ich gleich heute abend mal checken und dann berichten.
-
@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 ... !
-
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
$site_template->register_vars(array(
"image_id" => $image_row['image_id'],
füge darüber diesen script ein:
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
"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:
"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.
-
... 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 ... ;)
-
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!
-
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.
-
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.
-
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.
-
Hallo,
hast recht, zu groß :wink:
Im ACP (Admin Control Panel)
nobby
-
"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?
-
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
-
http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866
Hat da einer noch eine Idee dazu?
23.09.2010 keiner :( :?:
-
Hi,
ich versteh euer Problem nicht.
In der wz_tooltip stellt ihr die Größe für den Tooltip ein:
// 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:
"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:
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:
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 :)
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
-
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)
-
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.
-
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.
-
.... hab ja width und heightt weg gelassen, ...
dann ist alles klar....
-
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.
.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:
<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:
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); });
-
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?
-
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
$site_template->register_vars(array(
"image_id" => $image_row['image_id'],
füge darüber diesen script ein:
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
"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:
"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