Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML]Skrypt SlideShow
Forum PHP.pl > Forum > Przedszkole
TymcioPaluch
12.08.2013, 12:04:34
Witam,

Postanowiłem zrobić na swojej stronie skrypt pokazu slajdów.

Oto dwa pliki wykorzystywanego przez niego:


PushButtonSlideShow.html
[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>PushButton SlideShow</title>
  6.  
  7. <!--
  8. Set up the caption font in the following style.
  9. Also set the styles for the controls.
  10. Place the style script in the head of the page.
  11. //-->
  12.  
  13. <style>
  14. .Caption {
  15. font-family: Arial;
  16. font-weight: normal;
  17. font-size:  12pt;
  18. color:      #FF3300; }
  19.  
  20. A.Controls:link    { color:#666666;
  21.                      text-decoration:none;
  22.                      font-family: Arial;
  23.                      font-size:   14pt;
  24.                      font-weight: bold; }
  25. A.Controls:visited { color:#666666; text-decoration:none;
  26.                      font-family: Arial;
  27.                      font-size:   14pt;
  28.                      font-weight: bold; }
  29. A.Controls:active  { color:#666666; text-decoration:none;
  30.                      font-family: Arial;
  31.                      font-size:   14pt;
  32.                      font-weight: bold; }
  33. A.Controls:hover   { color:#00FF00; text-decoration:none;
  34.                      font-family: Arial;
  35.                      font-size:   14pt;
  36.                      font-weight: bold; }
  37.  
  38. </style>
  39.  
  40. <!--
  41. Place the following script in the head of the page.
  42. Follow the set-up instructions within the script.
  43. //-->
  44.  
  45. <script>
  46.  
  47. // (C) 2003 by CodeLifter.com
  48. // Free for all users, but leave in this header.
  49.  
  50. // ==============================
  51. // Set the following variables...
  52. // ==============================
  53.  
  54. // Set the slideshow speed (in milliseconds)
  55. var SlideShowSpeed = 300;
  56.  
  57. // Set the duration of crossfade (in seconds)
  58. var CrossFadeDuration = 2;
  59.  
  60. var picture = new Array(); // don't change this
  61. var Caption = new Array(); // don't change this
  62. var showHot = false;       // don't change this
  63.  
  64. // Specify the image files...
  65. // To add more images, just continue
  66. // the pattern, adding to the array below.
  67. // To use fewer images, remove lines
  68. // starting at the end of the picture array.
  69. // Caution: The number of pictures *must*
  70. // equal the number of Captions!
  71.  
  72. picture[1]  = 'tablica.jpg'
  73. picture[2]  = 'tablica.jpg';
  74. picture[3]  = 'tablica.jpg';
  75. picture[4]  = 'tablica.jpg';
  76. picture[5]  = 'tablica.jpg';
  77. picture[6]  = 'tablica.jpg';
  78. picture[7]  = 'tablica.jpg';
  79. picture[8]  = 'tablica.jpg';
  80. picture[9]  = 'tablica.jpg';
  81. picture[10] = 'tablica.jpg';
  82.  
  83. // Specify the Captions...
  84. // To add more captions, just continue
  85. // the pattern, adding to the array below.
  86. // To use fewer captions, remove lines
  87. // starting at the end of the Caption array.
  88. // Caution: The number of Captions *must*
  89. // equal the number of pictures!
  90.  
  91. Caption[1]  = "Artykuł";
  92. Caption[2]  = "Sport";
  93. Caption[3]  = "Muzyka";
  94. Caption[4]  = "Fotografia";
  95. Caption[5]  = "Taniec";
  96. Caption[6]  = "Inne";
  97. Caption[7]  = "This is the seventh caption.";
  98. Caption[8]  = "This is the eighth caption.";
  99. Caption[9]  = "This is the ninth caption.";
  100. Caption[10] = "This is the tenth caption.";
  101.  
  102. // =====================================
  103. // Do not edit anything below this line!
  104. // =====================================
  105.  
  106. var tss;
  107. var iss;
  108. var jss = 0;
  109. var pss = picture.length-1;
  110.  
  111. var preLoad = new Array();
  112. for (iss = 1; iss < pss+1; iss++){
  113. preLoad[iss] = new Image();
  114. preLoad[iss].src = picture[iss];}
  115.  
  116. function control(how){
  117. if (showHot){
  118. if (how=="H") jss = 1;
  119. if (how=="F") jss = jss + 1;
  120. if (how=="B") jss = jss - 1;
  121. if (jss > (pss)) jss=1;
  122. if (jss < 1) jss = pss;
  123. if (document.all){
  124. document.images.pictureBox.style.filter="blendTrans(duration=2)";
  125. document.images.pictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
  126. document.images.pictureBox.filters.blendTrans.Apply();}
  127. document.images.pictureBox.src = preLoad[jss].src;
  128. if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
  129. if (document.all) document.images.pictureBox.filters.blendTrans.Play();
  130. }}
  131.  
  132. </script>
  133.  
  134. </head>
  135.  
  136. <!--
  137. Add onload='showHot=true;' to the body tag.  This is
  138. needed to prevent false object calls while the page
  139. is loading. Optional: If you are using this in a
  140. popup, as in this demo, adding self.focus() to the
  141. onload event in the body tag will bring the popup
  142. to the front each time it is loaded [recommended].
  143. //-->
  144.  
  145. <body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">
  146.  
  147. <!--
  148. The following table holds the images, captions, and controls.
  149. Place the table in your page where you want the slideshow
  150. to appear.  Follow the instructions for each table cell.
  151. //-->
  152.  
  153. <div align="center">
  154.   <center>
  155.  
  156. <table border=0 cellpadding=10 cellspacing=0>
  157.   <tr>
  158.     <!--
  159.     The next table cell holds the images.
  160.     Set cell and image width and height the same.
  161.     The img src must have name=pictureBox in its
  162.     tag.  Often, the first image in the picture
  163.     array in the script is used here; but you
  164.     may also use a different, introductory image
  165.     as we have here, since this image is shown
  166.     only on start-up.
  167.     //-->
  168.     <td width=600 height=600 colspan="3">
  169.     <img src=tablica.jpg name=pictureBox width=600 height=600>
  170.  
  171.     </td>
  172.   </tr>
  173.   <tr>
  174.     <!--
  175.     The next table cell holds the captions.
  176.     This table cell must have id=CaptionBox and
  177.     class=Caption in its tag. The default caption
  178.     shows whilst loading in all browsers; NS4
  179.     will show only the default caption, throughout.
  180.     //-->
  181.     <td id=CaptionBox class=Caption align=center colspan="3">
  182.     This is the default caption.
  183.     </td>
  184.   </tr>
  185.     <!--
  186.     The following three cells contain the controls.
  187.     Each of the control a href's must contain class=
  188.     Controls, to attach the styles (see top of script).
  189.     To dress this up a bit, you can of course substitute
  190.     <img src> images for the text in the links.
  191.     //-->
  192.   <tr>
  193.     <td align="center">
  194.     <a class=Controls href="#" onClick="java script:control('B');">< <</a>
  195.     </td>
  196.     <td align="center">
  197.     <a class=Controls href="#" onClick="java script:control('H');">| | |</a>
  198.     </td>
  199.     <td align="center">
  200.     <a class=Controls href="#" onClick="java script:control('F');"><b>> ></b></a>
  201.     </td>
  202.   </tr> 
  203. </table>
  204.  
  205.   </center>
  206. </div>
  207.  
  208. </body>
  209.  
  210. </html> 
[HTML] pobierz, plaintext





launch.html

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>PushButton SlideShow</title>
  4.  
  5. <script>
  6. var launchSlideShowX = (video.width/2)-500;
  7. var launchSlideShowY = (video.height/2)-800;
  8. var pos = "left="+launchSlideShowX+",top="+launchSlideShowY;
  9. function launchSlideShow(){
  10. launchSlideShowWindow = window.open("PushButtonSlideShow.html","SlideShow","width=500,height=800,"+pos);}
  11. </script>
  12.  
  13. </head>
  14.  
  15. <body bgcolor="#000000" link="#FF8040" vlink="#FF8040" alink="#FF8040">
  16. <div align="center">
  17.   <center>
  18.   <table border="0" cellpadding="5" cellspacing="0" width="100%" height="80%">
  19.     <tr>
  20.       <td width="100%" height="80%" valign="middle" align="center"><a href="java script:launchSlideShow()"><font size="5">Launch<br>SlideShow</font></a></td>
  21.     </tr>
  22.   </table>
  23.   </center>
  24. </div>
  25.  
  26. </body>
  27.  
  28. </html>
  29.  
  30.  
[HTML] pobierz, plaintext


I teraz pojawia się problem otóż standardowo skrypt ten jest stworzony do wyświetlania obrazków. Ja natomiast chciałbym, aby była możliwość umieszczenia filmiku z youtobe w nim, oraz ustawienie jakiegoś tła.

Pomyślałem, aby zmienić w komórce poprostu tło ( wtedy będzie jedno tło dla wszystkich slajdów ) oraz podać link do pliku z youtobe zmniejszając jego rozmiar. Jednak skrypt ten nie chce odczytać tego filmiku. Bardzo proszę o pomoc. W celu pokazania jak działa skrypt daje odnośnik do mojej test domeny: Strona testowa skryptu
b4rt3kk
12.08.2013, 12:54:26
Znajdź sobie lepszy skrypt do pokazu slajdów, bo ten jest bardzo ubogi i przystosowany jedynie do umieszczania obrazków. Szybciej by było nawet napisać własny (przy pomocy jQuery) i na DIV-ach, w których możesz sobie umieszczać co tylko dusza zapragnie, filmik, obrazek, tekst, itd.
TymcioPaluch
12.08.2013, 13:04:42
Wydaje mi się że ten skrypt nie będzie tak ciężko zmienić. Tło sobie ustawie w komórce natomiast większy problem stanowi dla mnie jak uwzględnić, aby w linijce zdjecia[x]= ..... istniała możliwość załączenia filmu z youtobe.


Dodałem teraz inny skrypt dostepny pod adresem : http://zurb.com/playground/jquery_image_slider_plugin. Skrypt jest na bibliotekach jquery.
I również pojawia się problem z wrzuceniem filmiku ( skrypt na divach): http://www.keytogames.hekko.pl/kontakt.html

Nie wiem jak to ugryźć :/
mlawnik
12.08.2013, 23:54:58
Użyj gotowego lightboxa czy innego -boxa, w nich filmiki na pewno działają.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.