Thumbnailfunktion für das Newssystem - Help

Neues Thema verfassen Neues Thema

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.

view source print ?
01 <?php
02 function bbcode($bb){
03 ......
04     $bb = preg_replace("/\[color=(.*)\](.*)\[\/color\]/Usi", "<span color=\"\1\">\2</span>", $bb);
05     $bb = preg_replace("/\[email=(.*)\](.*)\[\/email\]/Usi", "<a href=\"mailto:\1\">\2</a>", $bb);
06
07     $bb = preg_replace("#\[img\](.+?)\[\/img\]#esi","imgsize('\1')",$bb);
08     $bb = preg_replace("/\[url=(.*)\](.*)\[\/url\]/Usi", "<a href=\"\1\" target='_blank'>\2</a>", $bb);
09 ......
10 // Der kommende Code steht VOR function get_bbcode($wo)
11 function imgsize($code)
12 {
13
14     $hoch = 150; // max hoehe
15     $breit = 150; // max breite
16
17     $rsize = getimagesize($code); // originalgroesse herausfinden
18
19     if(trim(chop($rsize[1])) <= $hoch and trim(chop($rsize[0])) <= $breit)
20     {
21         $hoch = trim(chop($rsize[1]));
22         $breit = trim(chop($rsize[0]));
23     }
24     // wenn bild igendwie groesser
25     else
26     {
27         $prozh = $hoch/$rsize[1];
28         $prozw = $breit/$rsize[0];
29         if($prozh > $prozw) $proz = $prozw;
30         else $proz = $prozh;
31         $hoch = $rsize[1]*$proz;
32         $breit = $rsize[0]*$proz;
33     }
34
35     $pic = '[url='.$code.'][img]'.$code.'[/img][/url]';
36     return $pic;
37 }
38 }

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

view source print ?
1 $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:

view source print ?
01   <script>
02
03     $(function() {
04
05       $( ".resizeme" ).aeImageResize({ height: 250, width: 250 });
06
07     });
08     $('img.resizeme').click(function(){
09         var par = $(this).parent().get(0).tagName;
10         if(par != 'A'){
11             window.open(this.src);
12         }
13     });
14
15       $(function ()
16
17     {
18
19         $(document).ready(function()
20
21         {
22
23             $('img.resizeme').each(function ()
24
25             {
26
27                 var currImg = $(this); // cache the selector
28
29                 currImg.wrap("<a href='" + currImg.attr("src") + "' target='_blank' />");
30
31             });
32
33         });
34
35     });
36
37 </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:

view source print ?
01 <script type="text/javascript">
02 function resizePics() {
03
04     var pict_width_max      = 700;          // Maximale Bilderbreite
05     var pict_width_after    = 700;          // Bilderbreite nach Grennderung
06
07     var pict_height_max     = 400;          // Maximale Bilderhhe
08     var pict_height_after   = 400;          // Bilderhhe nach Grennderung
09
10     var resize_pics_new_window = false;    // true ffnet das Bild in einem neuen Fenster, false vergrert oder verkleinert dynamisch
11
12     if(document.getElementsByTagName) {
13         var resize_pics_nr = document.getElementsByTagName("img");
14
15         for(i_pic_nr=0; i_pic_nr<resize_pics_nr.length; i_pic_nr++) {
16
17         if(resize_pics_nr[i_pic_nr].className=="contentImage"){
18             var pict_width_resize = resize_pics_nr[i_pic_nr].width;
19             var pict_height_resize = resize_pics_nr[i_pic_nr].height;
20
21             if (pict_width_resize > pict_width_max) {
22                     resize_pics_nr[i_pic_nr].style.width = pict_width_after + 'px';
23                     resize_pics_nr[i_pic_nr].title = unescape("Bitte anklicken :: um Bild in voller Groesse anzuzeigen");
24                     resize_pics_nr[i_pic_nr].className = 'ice';
25                     onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
26                     resize_pics_nr[i_pic_nr].onclick = function() {
27                         if (resize_pics_new_window == true) {
28                             var fenster = window.open(this.src);
29                         }
30                         else {
31                             if (this.style.width != '') {
32                                 this.style.width = '';
33                             }
34                             else {
35                                 this.style.width = pict_width_after + 'px';
36                             }
37                         }
38                     }
39             }
40             else if (pict_height_resize > pict_height_max) {
41                     resize_pics_nr[i_pic_nr].style.height = pict_height_after + 'px';
42                     resize_pics_nr[i_pic_nr].title = unescape("Bitte anklicken :: um Bild in voller Groesse anzuzeigen");
43                     resize_pics_nr[i_pic_nr].className = 'ice';
44                     onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
45                     resize_pics_nr[i_pic_nr].onclick = function() {
46                         if (resize_pics_new_window == true) {
47                             var fenster = window.open(this.src);
48                         }
49                         else {
50                             if (this.style.height != '') {
51                                 this.style.height = '';
52                             }
53                             else {
54                                 this.style.height = pict_height_after + 'px';
55                             }
56                         }
57                     }
58             }
59
60         }
61
62         }
63     }
64 }
65 window.onload = function() {
66        resizePics();
67     });
68 </script>

Liebe Gruesse
Alice

... { signatur } ...

Antworten Zitat
Steffi2012
Newbie

Registriert: 18.02.2012
Beitraege: 15

12.06.2012 um 01:31 Uhr

Danke Alice <3 sehr lieb von dir :-)

Antworten Zitat