Fotobilder Ticker usw.

  • Fotobilder Ticker usw.

    Halli Hallo liebe Coder,

    ich habe folgendes problem, ich möchte bei mir auf der Startseite einen Bilderticker haben, der die letzten 10 Userbilder anzeigt, die hochgeladen worden sind.

    Ein Script für den ticker habe ich schon:

    Quellcode

    1. /* * * * * * * * * * * * * * * * D I E V A R I A B L E N * * * * * * * * * * * * * * * * * */
    3. //°°°°°°°°°°Die News
    5. tNews=new Array();
    6. tNews.push('<img src="../../jpgs/portraitbw/1.jpg" width="100" height="100" />');
    7. tNews.push('<img src="../../jpgs/portraitbw/2.jpg" width="100" height="100" />');
    8. tNews.push('<img src="../../jpgs/portraitbw/3.jpg" width="100" height="100" />');
    9. tNews.push('<img src="../../jpgs/portraitbw/4.jpg" width="100" height="100" />');
    10. tNews.push('<img src="../../jpgs/portraitbw/5.jpg" width="100" height="100" />');
    11. tNews.push('<img src="../../jpgs/portraitbw/6.jpg" width="100" height="100" />');
    12. tNews.push('<img src="../../jpgs/portraitbw/7.jpg" width="100" height="100" />');
    13. tNews.push('<img src="../../jpgs/portraitbw/8.jpg" width="100" height="100" />');
    14. tNews.push('<img src="../../jpgs/portraitbw/9.jpg" width="100" height="100" />');
    15. tNews.push('<img src="../../jpgs/portraitbw/10.jpg" width="100" height="100" />');
    18. //°°°°°°°°°°Laufrichtung(up,down,left,right)
    19. strDir ='right';
    21. //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
    22. strDelimiter='';
    24. //°°°°°°°°°°Interval in ms
    25. intInterval =15;
    27. //°°°°°°°°°°Stop bei mouseover?true:false
    28. blnStopHover=true;
    30. //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
    31. intRepeat =1;
    33. //°°°°°°°°°°Rahmen
    34. strBorder ='0px solid #000000';
    36. //°°°°°°°°°°Breite
    37. intWidth =500;
    39. //°°°°°°°°°°Höhe
    40. intHeight =100;
    42. //Abstand Rahmen->Inhalt
    43. intPadding =0;
    45. //Background-color
    46. strBgc ='#FFFFFF';
    48. //Text-color
    49. strTxtc ='#ffffff';
    51. //Textausrichtung
    52. strAlign ='left';
    54. //Schritt pro Durchlauf(px)
    55. intStep=1;
    58. /* * * * * * * * * * * * * * * * * * D E R T I C K E R * * * * * * * * * * * * * * * * * * * * * */
    60. //IE ab V4?
    61. IE=document.all&&!window.opera;
    62. //DOM-Browser(ausser IE)
    63. DOM=document.getElementById&&!IE;
    66. //läuft ab IE4 und in DOM-Browsern
    67. if(DOM||IE)
    68. {
    69. //Ermitteln, ob Ticker horizontal oder vertikal laufen soll
    70. blnDir=(strDir=='up'||strDir=='down')?true:false;
    72. //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet
    73. strNobr=(blnDir)?'div':'nobr';
    75. //Trennzeichen zwischen den Einzelnen Eintraegen
    76. //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter
    77. //Ansonsten Zeilenumbrueche
    78. strDelimiter=(blnDir)?'<br><br>':strDelimiter;
    80. //String fuer Textausrichtung bei vertikalem Ticker
    81. strAlign=(blnDir)?'text-align:'+strAlign+';':'';
    83. //Variable zum Speichern des Intervals
    84. var objGo;
    85. //Variable zum Speichern der Position
    86. intPos=50;
    88. //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll
    89. strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':'';
    91. //Tickertext zu String zusammenfuegen
    92. strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter;
    93. strNews=strText;
    94. for(i=1;i<intRepeat;++i)
    95. {
    96. strNews+=strText;
    97. }
    99. //TickerCode zu String zusammenfuegen
    100. strTicker='<div style="position: relative; '+strAlign+'overflow:hidden;background-color:'+strBgc+
    101. ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
    102. 'px;"><'+strNobr+'><div id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
    103. ';"'+strStopHover+'>'+strNews+'</div></'+strNobr+'></div>';
    105. //TickerCode im Dokument ausgeben
    106. document.write(strTicker);
    108. //Funktion, um Ticker ticken zu lassen
    109. function DM_ticken()
    110. {
    111. //Ticker-Objekt je nach Browser ermitteln
    112. objTicker=(IE)?document.all.ticker:document.getElementById('ticker');
    114. //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung
    115. //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert);
    116. arrDir=new Array();
    117. arrDir['up'] =new Array(-1,objTicker.offsetHeight,'top');
    118. arrDir['down'] =new Array(1,objTicker.offsetHeight,'top');
    119. arrDir['left'] =new Array(1,objTicker.offsetWidth,'left');
    120. arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left');
    122. //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items
    123. dblOffset=arrDir[strDir][1]/intRepeat;
    125. //Neuen Positionswert ermitteln
    126. switch(strDir)
    127. {
    128. case'right':
    129. intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
    130. case'left':
    131. intPos=(intPos>0)?-dblOffset:intPos;break;
    132. case 'up':
    133. intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
    134. case 'down':
    135. intPos=(intPos>0)?-dblOffset:intPos;break;
    136. }
    137. //Neuen Positionswert zuweisen
    138. objTicker.style[arrDir[strDir][2]]=intPos + "px";
    140. //Positionswert hoch/heruntersetzen
    141. intPos+=intStep*arrDir[strDir][0];
    142. }
    143. //Erneut ticken lassen
    144. objGo=setInterval('DM_ticken()',intInterval);
    145. }
    Alles anzeigen

    an dieser Stelle gibt man die Bilder an denke ich mal:

    Quellcode

    1. tNews=new Array();
    2. tNews.push('<img src="../../jpgs/portraitbw/1.jpg" width="100" height="100" />');
    3. tNews.push('<img src="../../jpgs/portraitbw/2.jpg" width="100" height="100" />');
    4. tNews.push('<img src="../../jpgs/portraitbw/3.jpg" width="100" height="100" />');
    5. tNews.push('<img src="../../jpgs/portraitbw/4.jpg" width="100" height="100" />');
    6. tNews.push('<img src="../../jpgs/portraitbw/5.jpg" width="100" height="100" />');
    7. tNews.push('<img src="../../jpgs/portraitbw/6.jpg" width="100" height="100" />');
    8. tNews.push('<img src="../../jpgs/portraitbw/7.jpg" width="100" height="100" />');
    9. tNews.push('<img src="../../jpgs/portraitbw/8.jpg" width="100" height="100" />');
    10. tNews.push('<img src="../../jpgs/portraitbw/9.jpg" width="100" height="100" />');
    11. tNews.push('<img src="../../jpgs/portraitbw/10.jpg" width="100" height="100" />');
    Alles anzeigen


    ich habe bereits eine seite, wo thumbs gezogen werden, von allen hochgeladenen profilbilder, die neusten zuerst.
    daraus könnte man ja den code beziehen, der dann in den ticker soll, allerdings is das zu viel für meine kenntnisse^^
    hier mal der code von der schon bestehenen seite:

    Quellcode

    1. <?php
    2. # Copyright by: Manuel Staechele
    3. # Support: www.ilch.de
    6. defined ('main') or die ( 'no direct access' );
    8. # mini config
    9. $img_per_site = $allgAr['gallery_imgs_per_site'];
    10. $img_per_line = $allgAr['gallery_imgs_per_line'];
    11. # original groesse anzeigen
    13. $title = $allgAr['title'].' :: Fotoalbum';
    14. $hmenu = 'Fotoalbum';
    15. $design = new design ( $title , $hmenu );
    16. $design->header();
    17. $tpl = new tpl ('foto' );
    19. $limit = $img_per_site;
    20. $page = ($menu->getA(1) == 'p' ? escape($menu->getE(1), 'integer') : 1 );
    21. $MPL = db_make_sites ($page , '' , $limit , '?foto' , "usergallery WHERE free = '1' ORDER BY id ASC");
    22. $anfang = ($page - 1) * $limit;
    23. $erg = db_query("SELECT prefix_usergallery.id,uid,prefix_usergallery.`besch`,endung,prefix_usergallery.name,prefix_user.name as user_name FROM prefix_usergallery LEFT JOIN prefix_user ON prefix_usergallery.uid = prefix_user.id WHERE free = '1' ORDER BY prefix_usergallery.id DESC LIMIT ".$anfang.",".$limit);
    24. if ( db_num_rows($erg) > 0 ) {
    25. $tpl->set('imgperline', $allgAr['gallery_imgs_per_line']);
    26. $tpl->set('breite', $allgAr['gallery_normal_width']+30);
    27. $tpl->set('MPL',$MPL);
    28. $tpl->out(0); $class = 'Cnorm';
    29. $i = 0;
    30. while($row = db_fetch_assoc($erg) ) {
    31. $size = @getimagesize('include/images/usergallery/img_thumb_'.$row['id'].'.'.$row['endung']);
    32. if($size[0] > $size[1]){
    33. $breite = '100';
    34. $hoehe = $size[1] * (100 / $size[0] );
    35. }elseif($size[0] <= $size[1]){
    36. $hoehe = '100';
    37. $breite = $size[0] * (100 / $size[1] );
    38. }
    39. $row['groesse'] = 'height="'.$hoehe.'" width="'.$breite.'"';
    40. $class = ( $class == 'Cmite' ? 'Cnorm' : 'Cmite' );
    41. $row['class'] = $class;
    42. $row['besch'] = unescape($row['besch']);
    43. $row['width'] = round( 100 / $img_per_line );
    44. $row['bildr'] = $i + (($page-1) * $img_per_site);
    45. if ( $i <> 0 AND ($i % $img_per_line ) == 0 ) { echo '</tr><tr>'; }
    46. $tpl->set_ar_out($row,1);
    47. $i++;
    48. }
    49. if ( $i % $img_per_line <> 0 ) {
    50. $anzahl = $img_per_line - ($i % $img_per_line);
    51. for($x=1;$x<=$anzahl;$x++){
    52. echo '<td class="'.$class.'"></td>';
    53. }
    54. }
    55. $tpl->out(2);
    56. }
    57. $design->footer();
    58. ?>
    Alles anzeigen


    hoffe jemand kann mir helfen diese beiden sachen zu kombinieren ;)

    lg und vielen dank Botox84

  • Willkommen,
    ich will nur vorab mal fragen: Wie genau stellst du dir "helfen" vor. Willst du Tipps oder willst du jmd der dir das macht?

    wenn du wirklich nur jemanden suchst, der das für dich macht, dann muss ich das ins Jobforum verschieben.
    Dann musst du aber noch sagen was du bereit bist, dafür zu zahlen. Vielleicht findet sich ja auch jmd der es kostenlos macht.

  • naja, der code ist komisch.. du arbeitest halb mit einer template engine..

    Quellcode

    1. $tpl->set_ar_out($row,1);

    halb aber auch nicht

    Quellcode

    1. echo '<td class="'.$class.'"></td>';


    im prinzip musst du statt der 46er Zeile nur deine Wunschausgabe einsetzen.
    Also zum Beispiel:

    Quellcode

    1. tNews.push('<img src="<?='include/images/usergallery/img_thumb_'.$row['id'].'.'.$row['endung']?>" <?=$row['groesse']?> />');