Loading...   Upload Image

Thumbnailfunktion für das Newssystem - HelpForum » Webzone » PHP & MySQL » Thumbnailfunktion für das Newssystem - Help

Neues Thema verfassen Neues Thema

  • Steffi2012User ist offline
    Newbie



    Registriert: 18.02.2012
    Beitraege: 15

    10.06.2012 um 01:16 Uhr

    Hallo Alice und Co.,

    ich möchte 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 für eure Hilfe.

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

    Liebe Grüße
    Steffi



    Der Beitrag wurde insgesamt 2 mal editiert, zuletzt 10.06.2012 um 01:40 Uhr ...
  • Steffi2012User ist offline
    Newbie



    Registriert: 18.02.2012
    Beitraege: 15

    10.06.2012 um 22:10 Uhr

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

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

    Den JavaScript-Teil für 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.



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    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 Größenänderung
    
    	var pict_height_max		= 400;			// Maximale Bilderhöhe
    	var pict_height_after	= 400;			// Bilderhöhe nach Größenänderung
    
    	var resize_pics_new_window	= false;	// true öffnet das Bild in einem neuen Fenster, false vergrößert 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 } ...
  • Steffi2012User ist offline
    Newbie



    Registriert: 18.02.2012
    Beitraege: 15

    12.06.2012 um 01:31 Uhr

    Danke Alice <3 sehr lieb von dir :-)




[ 1 ] Seite 1 von 1


Affiliates:   Design Grafixx  •   Blue-Graphics  •   Colorful Gfx  •   The Seduction  •   Pat DG  •   Gallery Yuri  •   Chibi Graphics  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider