Forum

brauche hilfe bei einem javascript

Erstellt von XIIZQ, 12.02.2011.



  1. XIIZQ

    XIIZQ Noch nicht viel geschrieben

    Dabei seit:
    09.02.2010
    Beiträge:
    46
    Geschlecht:
    männlich
    brauche hilfe bei einem javascript
    hallo,

    ich nutze dieses script und wollte fragen ob jemand mir helfen kann,
    kenne mich mit javascripts übrhaupt nicht aus, dieses skript ist eine
    slideshow, würde gerne ein zufallsgenerator dadrinne haben womit
    die bilder bei ca. 30stk nicht immer nacheinander gezeigt werden
    sondern immer in einer zufälliger reihenfolge.

    kann mir wer da helfen pls?

    HTML:
    1. <!-- BEGINNING OF THE CODE FOR THE CSS-3-SLIDESHOW-->
    2.  
    3. <!----------------------------------------->
    4. <!-- STYLE-CONFIGURATION STARTS HERE -->
    5. <!----------------------------------------->
    6. <!-- Set the text-style within .textboxstyle -->
    7. <!-- Set the backgroundcolor, the rounded corners and the shadow within .textboxbackgroundstyle -->
    8. <!-- Set the rounded corners and the shadow within .curveandshadowstyle -->
    9. <style>    
    10. .textboxstyle {
    11. font-family:Arial;
    12. font-size:16pt;
    13. color:black;
    14. text-align:center;
    15. vertical-align:top;
    16. }
    17.  
    18. .textboxbackgroundstyle {
    19. background-color:white;
    20. padding:5px;
    21.  
    22. /* rounded corners for Firefox */
    23. -moz-border-radius-topleft: 15px;
    24. -moz-border-radius-bottomright: 15px;
    25.  
    26. /* rounded corners for for Safari and Chrome */
    27. -webkit-border-top-left-radius: 15px;
    28. -webkit-border-bottom-right-radius: 15px;
    29.  
    30. /* rounded corners for Opera */
    31. border-top-left-radius: 15px;
    32. border-bottom-right-radius: 15px;
    33. }
    34.  
    35. .curveandshadowstyle {
    36.  
    37. /* shadow and rounded corners for Firefox */
    38. -moz-box-shadow: 5px 5px 8px #818181;
    39. -moz-border-radius-topleft: 25px;
    40. -moz-border-radius-bottomright: 25px;
    41.  
    42. /* shadow and rounded corners for Safari and Chrome */
    43. -webkit-box-shadow: 5px 5px 8px #818181;
    44. -webkit-border-top-left-radius: 25px;
    45. -webkit-border-bottom-right-radius: 25px;
    46.  
    47. /* shadow and rounded corners for Opera */
    48. box-shadow: 5px 5px 5px #818181;
    49. border-top-left-radius: 25px;
    50. border-bottom-right-radius: 25px;
    51.  
    52. /* shadow for Internet Explorer */
    53. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');
    54.  
    55. border-style:solid;
    56. border-width:1px;
    57. border-color:white;
    58. }
    59.  
    60. <!----------------------------------------->
    61. <!-- STYLE-CONFIGURATION STOPS HERE -->
    62. <!----------------------------------------->
    63.    
    64.  
    65. var imgurl= new Array()
    66. var message= new Array()
    67. var thislink= new Array()
    68.  
    69. /////////////////////////////////////////////////
    70. // SCRIPT-CONFIGURATION STARTS HERE
    71. /////////////////////////////////////////////////
    72.  
    73. // set the url (or path)  of your images. Add as many images as you like
    74. imgurl[0]="../../pics/300x180bluefish.jpg"
    75. imgurl[1]="../../pics/300x180bonbons.jpg"
    76. imgurl[2]="../../pics/300x180castle.jpg"
    77. imgurl[3]="../../pics/300x180fruitshop.jpg"
    78.  
    79. // set the messages corresponding to the images above (no more no less than the images above)
    80. message[0]="Let's go fishing today"
    81. message[1]="You are even sweeter"
    82. message[2]="My castle is my home"
    83. message[3]="Eat more vitamins"
    84.  
    85. // set the links corresponding to the images above (no more no less than the images above)
    86. // If you dont want to add a link enter a #"instead of http://www.mylink.com, see smaple below
    87. thislink[0]="http://www.fabulant.com"
    88. thislink[1]="http://www.fabulant.com"
    89. thislink[2]="#"
    90. thislink[3]="http://www.fabulant.com"
    91.  
    92. // width of pictures (pixel)
    93. var imgwidth=300
    94.  
    95. // width of pictures (pixel)
    96. var imgheight=180
    97.  
    98. // set stillstand of picture (seconds)
    99. var stillstand=2.5
    100.  
    101. // set opacity-strength (transparency-effect). Values may range from 1 to 100
    102. var opacitystrength=60
    103.  
    104. /////////////////////////////////////////////////
    105. // SCRIPT-CONFIGURATION STOPS HERE
    106. /////////////////////////////////////////////////
    107.  
    108.  
    109. // Do not edit below this line
    110. var tmr
    111. var step=10
    112. var i=imgwidth
    113. var i_imgurl=0
    114. stillstand*=1000
    115.  
    116. var preloadedimages=new Array()
    117. for (iii=0;iii<imgurl.length;iii++){
    118.    preloadedimages[iii]=new Image()
    119.    preloadedimages[iii].src=imgurl[iii]
    120. }
    121.  
    122. function ******pic() {
    123.    document.getElementById("textbox").innerHTML=""
    124.    if (i>0) {
    125.         i-=step
    126.         document.getElementById("picdiv").style.width=i+"px"
    127.         document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
    128.         document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
    129.         document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
    130.         tmr=setTimeout("******pic()",20)
    131.     }
    132.     else {
    133.         i_imgurl++
    134.         if (i_imgurl>=imgurl.length) {
    135.             i_imgurl=0
    136.         }
    137.         document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
    138.         i=1
    139.         tmr=setTimeout("enlargepic()",20)
    140.     }
    141. }
    142.  
    143. function enlargepic() {
    144.     if (i<=imgwidth) {
    145.        i+=step
    146.        document.getElementById("picdiv").style.width=i+"px"
    147.        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
    148.        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
    149.        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
    150.        tmr=setTimeout("enlargepic()",20)
    151.    }
    152.    else {
    153.        i=imgwidth
    154.        showmessage()
    155.    }
    156. }
    157.  
    158. function showmessage() {
    159.    document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
    160.     tmr=setTimeout("******pic()",stillstand)
    161. }
    162.  
    163. function gotothislink(){
    164.     document.location.href=thislink[i_imgurl]
    165.  
    166. }
    167.  
    168. document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
    169. document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')
    170.  
    171. document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')
    172.  
    173. document.write('</div>')
    174.  
    175. window.onload=******pic
    176. <!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->
    177.  
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    brauche hilfe bei einem javascript
    AW: brauche hilfe bei einem javascript

    Halte dein Script für diesen Zweck für ziemlich kontraproduktiv, Daten zum selben Bild in drei verschiedenen Arrays zu speichern. Da solltest du ansetzen. Erstmal die Daten in einem mehrdimensionalen Array vereinen, dann kannst du dieses Array nach belieben mischen...
     
    #2      
  3. XIIZQ

    XIIZQ Noch nicht viel geschrieben

    Dabei seit:
    09.02.2010
    Beiträge:
    46
    Geschlecht:
    männlich
    brauche hilfe bei einem javascript
    AW: brauche hilfe bei einem javascript

    ich habe das script gefunden und nicht geschrieben,
    sonst wäre da ein zufallsskript drin ^^
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.856
    Geschlecht:
    männlich
    Ort:
    Dresden
    brauche hilfe bei einem javascript
    AW: brauche hilfe bei einem javascript

    Statt mit diesem Monstrum von Script zu kämpfen, schlage ich dir eine (bessere und modernere) Alternative vor: suche nach Gallerien/Slideshows für jQuery. Die ersten 3 Ergebnisse meiner Abfrage:
    20 Best jQuery Slideshow / Photo Gallery Plugins
    33 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials
    15 jQuery slideshow/gallery plugins

    Die meisten davon sind leicht konfigurierbar und sind gut (mit Beispielen) dokumentiert. Ich vermute, dass eine Teilmenge davon auch eine Zufalls-Option hat.


    Duddle
     
    #4      
  5. XIIZQ

    XIIZQ Noch nicht viel geschrieben

    Dabei seit:
    09.02.2010
    Beiträge:
    46
    Geschlecht:
    männlich
    brauche hilfe bei einem javascript
    AW: brauche hilfe bei einem javascript

    witzig ^^ bei den 33 powerfull jquery sachen ist das hier dabei Free JavaScript: CSS3 enhanced zoom-slideshow das ist genau das script was ich nutze ^^°
     
    #5      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×