Thumbnailfunktion für das Newssystem - Help

Steffi2012

Newbie

Registriert: 18.02.2012
Beitraege: 15

10.06.2012 um 01:16 Uhr

Hallo Alice und Co.,

ich mchte das Newssystem hier auf dieser Seite durch eine Thumbnailfunktion erweitern. Ich habe jetzt auch schon einen Code gefunden, allerdings blicke ich selber nicht so durch:
Das ist ein Teil der function.php.

<?php
function bbcode($bb){
......
	$bb = preg_replace("/\[color=(.*)\](.*)\[\/color\]/Usi", "<span color=\"\1\">\2</span>", $bb);
	$bb = preg_replace("/\[email=(.*)\](.*)\[\/email\]/Usi", "<a href=\"mailto:\1\">\2</a>", $bb); 	
	 	
	$bb = preg_replace("#\[img\](.+?)\[\/img\]#esi","imgsize('\1')",$bb);
	$bb = preg_replace("/\[url=(.*)\](.*)\[\/url\]/Usi", "<a href=\"\1\" target='_blank'>\2</a>", $bb);
......
// Der kommende Code steht VOR function get_bbcode($wo)
function imgsize($code)
{

    $hoch = 150; // max hoehe
    $breit = 150; // max breite

    $rsize = getimagesize($code); // originalgroesse herausfinden

    if(trim(chop($rsize[1])) <= $hoch and trim(chop($rsize[0])) <= $breit)
    {
        $hoch = trim(chop($rsize[1]));
        $breit = trim(chop($rsize[0]));
    }
    // wenn bild igendwie groesser
    else
    {
        $prozh = $hoch/$rsize[1];
        $prozw = $breit/$rsize[0];
        if($prozh > $prozw) $proz = $prozw;
        else $proz = $prozh;
        $hoch = $rsize[1]*$proz;
        $breit = $rsize[0]*$proz;
    }

    $pic = '[url='.$code.'][img]'.$code.'[/img][/url]';
    return $pic;
} 
}

Ausgegeben wird zurzeit nur [ img]url[ /img] und zwar verlinkt mit url=url. Wie kann ich das Bild nun verkleinert darstellen? Wenn ich ganz normal

$bb = preg_replace("/\[img\](.*)\[\/img\]/Usi", "<img src=\"\1\" alt=\"\" \>", $bb)

benutze, wird das Bild ja im original ausgegeben und nicht verkleinert dargestellt.

Vielen DAnk fr eure Hilfe.

Edit: wie ich gesehen habe, hast du auch schon eine Funktion in deinem Newssystem. eventuell knntest du sie uns zeigen, alice?

Liebe Gre
Steffi

Der Beitrag wurde insgesamt 2 mal editiert, zuletzt 10.06.2012 um 01:40 Uhr ...

Antworten

Zitat

Steffi2012

Newbie

Registriert: 18.02.2012
Beitraege: 15

10.06.2012 um 22:10 Uhr

Mein Problem hat sich geklrt. Durch ein bisschen Recherche habe ich nun JavaScript benutzt. Hier:

https://github.com/adeelejaz/jquery-image-resize/

Den JavaScript-Teil fr den head-Bereich habe ich mithilfe eines Freundes angepasst:

  <script>

    $(function() {

      $( ".resizeme" ).aeImageResize({ height: 250, width: 250 });

    });
	$('img.resizeme').click(function(){
		var par = $(this).parent().get(0).tagName;
		if(par != 'A'){
			window.open(this.src);
		}
	});

      $(function ()

    {

        $(document).ready(function()

        {

            $('img.resizeme').each(function ()

            {

                var currImg = $(this);  // cache the selector

                currImg.wrap("<a href='" + currImg.attr("src") + "' target='_blank' />");

            });

        });

    });

</script>

Ich hoffe, dass das den einen oder anderen weiterbringt. Alle anderen JavaScripte haben mir nichts gebracht, nur jQuery.

Antworten

Zitat

Alice

Admin

Registriert: 14.12.2006
Beitraege: 1058

11.06.2012 um 10:03 Uhr

Hallo Steffi,

ich hab es hier auch mit Javascript umgesetzt, denn onthefly bilder mit php verkleinert darstellen,
so wie du es versucht hattest, ist nicht wirklich sinnvoll

Das Ganze laesst sich auch wunderbar ohne jQuery umsetzten.

Dazu einfach folgendes in den Head-Bereich der Seite packen, ggf. Bildgroesse anpassen:

<script type="text/javascript">
function resizePics() {

	var pict_width_max		= 700;			// Maximale Bilderbreite
	var pict_width_after	= 700;			// Bilderbreite nach Grennderung

	var pict_height_max		= 400;			// Maximale Bilderhhe
	var pict_height_after	= 400;			// Bilderhhe nach Grennderung

	var resize_pics_new_window	= false;	// true ffnet das Bild in einem neuen Fenster, false vergrert oder verkleinert dynamisch

	if(document.getElementsByTagName) {
		var resize_pics_nr = document.getElementsByTagName("img");

		for(i_pic_nr=0; i_pic_nr<resize_pics_nr.length; i_pic_nr++) {
		
		if(resize_pics_nr[i_pic_nr].className=="contentImage"){
			var pict_width_resize = resize_pics_nr[i_pic_nr].width;
			var pict_height_resize = resize_pics_nr[i_pic_nr].height;

			if (pict_width_resize > pict_width_max) {
					resize_pics_nr[i_pic_nr].style.width = pict_width_after + 'px';
					resize_pics_nr[i_pic_nr].title = unescape("Bitte anklicken :: um Bild in voller Groesse anzuzeigen");
					resize_pics_nr[i_pic_nr].className = 'ice';				
					onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
					resize_pics_nr[i_pic_nr].onclick = function() {
						if (resize_pics_new_window	== true) {
							var fenster = window.open(this.src);
						}
						else {
							if (this.style.width != '') {
								this.style.width = '';
							}
							else {
								this.style.width = pict_width_after + 'px';
							}
						}
					}
			}
			else if (pict_height_resize > pict_height_max) {
					resize_pics_nr[i_pic_nr].style.height = pict_height_after + 'px';
					resize_pics_nr[i_pic_nr].title = unescape("Bitte anklicken :: um Bild in voller Groesse anzuzeigen");
					resize_pics_nr[i_pic_nr].className = 'ice';
					onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
					resize_pics_nr[i_pic_nr].onclick = function() {
						if (resize_pics_new_window	== true) {
							var fenster = window.open(this.src);
						}
						else {
							if (this.style.height != '') {
								this.style.height = '';
							}
							else {
								this.style.height = pict_height_after + 'px';
							}
						}
					}
			}

		}
		
		}
	}
}
 window.onload = function() {
       resizePics();
    });
</script>

Liebe Gruesse
Alice

... { signatur } ...

Antworten

Zitat