ugrás a tartalomhoz

Képek előtöltése, CSS NINCS, javascript van...

fobee000 · 2008. Jan. 4. (P), 20.21
Sziasztok!

Lehet hogy már volt ilyenről szó, mindenesetre én erre konkrét megoldást még nem találtam. Szóval a probléma a következő. Van egy slider, ami 44 képet mozgat jobbra, vagy balra úgy, hogy csak néhányat mutat közülük egyszerre. Ezeket szeretném előre betölteni, mert így kicsit akadozik és nem folyamatos a futása a képeknek( bocs hogy ilyen hülyén fogalmazok). Na most mivel ezek nem háttérképek, hanem linkek szövege helyén képek, és css-t sem használtam, a kérdésem az, hogy létezik-e erre valamilyen megoldás? A csúszka egyébként javascript-el van megcsinálva. Az oldal címe , hogy lássuk is hogy miről van szó. Előre is köszi a válaszokat.

Üdv, Fobee
‹ Az űrlap egy részének kijelölése brokenlink ellenőrzés ajaxszal külső domainre ›
 ■
1

Más lehet a baj

fobee000 · 2008. Jan. 4. (P), 23.52
Megcsináltam próbaképpen úgy az alsót, hogy egy egész kép az egész, hátha nem akadozna, de így is olyan. Mi lehet a probléma, mert valószínűleg nem előtöltés.. ?
2

Mi is a cím?

Nagy Gusztáv · 2008. Jan. 5. (Szo), 00.50
Én nem találom a linket :-(
3

cím

fobee000 · 2008. Jan. 5. (Szo), 01.17
fobee.freeweb.hu

Kiírtam így is, mert az előbbi link nem került fel ide és most se rakja ki a linket
5

??

fobee000 · 2008. Jan. 5. (Szo), 18.36
Na, senkinek semmi ötlete nincs???
4

Kódrészlet :

fobee000 · 2008. Jan. 5. (Szo), 01.26
Itt van a kód is ami működteti, a képek közül csak egyet hagytam bent a listában, egy tömbben vannak tárolva amugy a hivatkozások. A kódot nem én írtam hanem letöltöttem és átírtam olyanra amilyen nekem kell, mármint a beállításokat. Lehet hogy eleve lassabban fut ez így, nemtom.. :S
  1. <script type="text/javascript">  
  2.   
  3.   
  4. //Specify the slider's width (in pixels)  
  5. var sliderwidth=800  
  6. //Specify the slider's height  
  7. var sliderheight="25px"  
  8. //Specify the slider's slide speed (larger is faster 1-10)  
  9. var slidespeed=1  
  10. //configure background color:  
  11. slidebgcolor="#333333"  
  12.   
  13. //Specify the slider's images  
  14.   
  15. var rightleftslide=new Array()  
  16. var finalslide=''  
  17. rightleftslide[43]='<a href="./orszagok/albania.html" target="mainFrame"><img src="./images/orszagok/albania_nincs.gif" border="0"></a>'  
  18.   
  19.   
  20. //Specify gap between each image (use HTML):  
  21. var imagegap=" "  
  22.   
  23. //Specify pixels gap between each slideshow rotation (use integer):  
  24. var slideshowgap=5  
  25.   
  26.   
  27. ////NO NEED TO EDIT BELOW THIS LINE////////////  
  28.   
  29.   
  30. var copyspeed=slidespeed  
  31. rightleftslide='<nobr>'+rightleftslide.join(imagegap)+'</nobr>'  
  32. var iedom=document.all||document.getElementById  
  33. if (iedom)  
  34. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;right:-9000px">'+rightleftslide+'</span>')  
  35. var actualwidth=''  
  36. var cross_slide, ns_slide  
  37.   
  38. function fillup(){  
  39. if (iedom){  
  40. cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2  
  41. cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3  
  42. cross_slide.innerHTML=cross_slide2.innerHTML=rightleftslide  
  43. actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth  
  44. cross_slide2.style.right=actualwidth+slideshowgap+"px"  
  45. }  
  46. else if (document.layers){  
  47. ns_slide=document.ns_slidemenu.document.ns_slidemenu2  
  48. ns_slide2=document.ns_slidemenu.document.ns_slidemenu3  
  49. ns_slide.document.write(rightleftslide)  
  50. ns_slide.document.close()  
  51. actualwidth=ns_slide.document.width  
  52. ns_slide2.right=actualwidth+slideshowgap  
  53. ns_slide2.document.write(rightleftslide)  
  54. ns_slide2.document.close()  
  55. }  
  56. righttime=setInterval("slideright()",30)  
  57. }  
  58. window.onload=fillup  
  59.   
  60. function slideright(){  
  61. if (iedom){  
  62. if (parseInt(cross_slide.style.right)>(actualwidth*(-1)+8))  
  63. cross_slide.style.right=parseInt(cross_slide.style.right)-copyspeed+"px"  
  64. else  
  65. cross_slide.style.right=parseInt(cross_slide2.style.right)+actualwidth+slideshowgap+"px"  
  66.   
  67. if (parseInt(cross_slide2.style.right)>(actualwidth*(-1)+8))  
  68. cross_slide2.style.right=parseInt(cross_slide2.style.right)-copyspeed+"px"  
  69. else  
  70. cross_slide2.style.right=parseInt(cross_slide.style.right)+actualwidth+slideshowgap+"px"  
  71.   
  72. }  
  73. else if (document.layers){  
  74. if (ns_slide.right>(actualwidth*(-1)+8))  
  75. ns_slide.right-=copyspeed  
  76. else  
  77. ns_slide.right=ns_slide2.right+actualwidth+slideshowgap  
  78.   
  79. if (ns_slide2.right>(actualwidth*(-1)+8))  
  80. ns_slide2.right-=copyspeed  
  81. else  
  82. ns_slide2.right=ns_slide.right+actualwidth+slideshowgap  
  83. }  
  84. }  
  85. ////slideleft vége  
  86.   
  87. if (iedom||document.layers){  
  88. with (document){  
  89. document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')  
  90. if (iedom){  
  91. write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')  
  92. write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')  
  93. write('<div id="test2" style="position:absolute;right:0px;top:0px"></div>')  
  94. write('<div id="test3" style="position:absolute;right:-1000px;top:0px"></div>')  
  95. write('</div></div>')  
  96. }  
  97. else if (document.layers){  
  98. write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')  
  99. write('<layer name="ns_slidemenu2" right=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')  
  100. write('<layer name="ns_slidemenu3" right=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')  
  101. write('</ilayer>')  
  102. }  
  103. document.write('</td></table>')  
  104. }  
  105. }  
  106. </script>  
6

lassu

gonoszcsiga · 2008. Jan. 5. (Szo), 23.45
szerintem ez egy procigyilkos script azert lassu, vidd az egeret az egyik fole kozben a szemed a masikon legyen, es latni fogod, hogy begyorsul a masik(nalam legalabbis).
szerintem vedd ki az alsot, helyette rakd be normal betumerettel az orszagok nevet, mivel baromi idegolo kivarni, hogy navajon mikor scrollozik be mar az az orszag amire varok.
7

Sajna ilyen kell annak akinek csinálom

fobee000 · 2008. Jan. 6. (V), 00.00
Az addig jó lenne hogy kiveszem, de sajnos olyan kell akinek csinálom, hogy alul-felül ugyanaz csak az irány ellentétes. Ja meg hogy a szöveg is effektekkel rendelkezzen, hogy olyan legyen, mintha "ragyognának" a betűk.
Micsoda igények... :) Lehet másik scriptet kéne néznem, de a javahoz sajna nem értek, örültem hogy ezt az egyet is össze sikerült hoznom.
8

Ja meg nem muszály kivárni

fobee000 · 2008. Jan. 6. (V), 00.06
Ja meg a térképre is lehet kattintani, azon is ott vannak a linkek, bár a nagyon kicsi országokat tényleg ki kell célozgatni az egérrel :)
9

horizontal scroller

griphons · 2008. Jan. 7. (H), 10.45
Én ezt használtam már korábban. Sztem egyszerűbb, és gyorsabb is mint a tied:
http://www.fortochka.com/JavaScript/HorScroller/default.htm
Viszonylag egyszerű vertikálissá is átalakítani, és irányváltani sem bonyolult, de azért bele kell piszkálni.
10

Köszi

fobee000 · 2008. Jan. 8. (K), 02.14
Köszi szépen, holnap kipróbálom. Vertikálisra most nincs szükségem, az irányváltást meg majdcsak sikerül megoldani, az előzőnél is sikerült. Mégegyszer köszi
11

Táblázat problem

fobee000 · 2008. Jan. 9. (Sze), 21.09
Van egy kis problémám ezzel az új sliderrel. Szeretném ha ez is egy táblázaton belül jelenítené meg a képeket, addig még működne is, hogy berakom táblázatba de: a kiíratásnál csak akkor rakja a táblába, ha egy bizonyos "style-position" beállítást absolute-ról átírok relative-re, ami nem is lenne baj, csak a képek szétesnek, és kilógnak a táblából ha az rövidebb, mint a képernyő szélessége. Itt van a kód is, az utolsó sorok a lényegesek. Ha valaki tud kérem segítsen.
  1. <Script>  
  2. ///////////////////  
  3. //www.fortochka.com  
  4. //Alexander Babichev 2006 Coopyright  
  5. //This script is free for private use. Otherwise a $10 fee per a site is required.  
  6. //the script can be modified but the copyright notice should be right unchanged.  
  7. ///////////////////  
  8.   
  9.   
  10. var pic = new Array()  
  11.   
  12. function banner(name, width, link){  
  13.     this.name = name  
  14.     this.width = width  
  15.     this.link = link  
  16.    }  
  17.   
  18. pic[0] = new banner('./images/orszagok/albania_nincs.gif',130,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')  
  19. pic[1] = new banner('./images/orszagok/albania_nincs.gif',130,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')  
  20. pic[2] = new banner('./images/orszagok/albania_nincs.gif',130,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')  
  21. pic[3] = new banner('./images/orszagok/albania_nincs.gif',130,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')  
  22. pic[4] = new banner('./images/orszagok/albania_nincs.gif',130,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')  
  23.   
  24.   
  25. var speed = 20  
  26.   
  27. var kk = pic.length  
  28. var ii  
  29. var hhh  
  30. var nnn  
  31. var myInterval  
  32. var myPause  
  33. var mode = 0  
  34.   
  35.   
  36.   
  37. var imgArray = new Array(kk)  
  38. var myright = new Array(kk)  
  39.   
  40. for (ii=0;ii<kk;ii++){  
  41. imgArray[ii] = new Image()  
  42. imgArray[ii].src = pic[ii].name  
  43. imgArray[ii].width = pic[ii].width  
  44.   
  45.     hhh=0   
  46.     for (nnn=0;nnn<ii;nnn++){  
  47.         hhh=hhh+pic[nnn].width  
  48.     }  
  49.     myright[ii] = hhh  
  50. }  
  51.   
  52. function ready(){  
  53.     for (ii=0;ii<kk;ii++){   
  54.         if (document.images[ii].complete == false){  
  55.             return false      
  56.             break  
  57.         }  
  58.     }  
  59. return true  
  60. }  
  61.   
  62.   
  63. function startScrolling(){  
  64.     if (ready() == true){         
  65.         window.clearInterval(myPause)  
  66.         myInterval = setInterval("autoScroll()",speed)    
  67.     }  
  68. }     
  69.       
  70.   
  71. function autoScroll(){  
  72.     for (ii=0;ii<kk;ii++){  
  73.         myright[ii] = myright[ii] - 1  
  74.           
  75.     if (myright[ii] == -(pic[ii].width)){  
  76.         hhh = 0  
  77.         for (nnn=0;nnn<kk;nnn++){  
  78.             if (nnn!=ii){  
  79.                 hhh = hhh + pic[nnn].width  
  80.             }             
  81.         }  
  82.         myright[ii] =  hhh  
  83.     }  
  84.           
  85.                   
  86.         document.images[ii].style.right = myright[ii]  
  87.     }  
  88.     mode = 1  
  89. }  
  90.   
  91. function stop(){  
  92.     if (mode == 1){  
  93.         window.clearInterval(myInterval)  
  94.     }  
  95.     if (mode == 0){  
  96.         window.clearInterval(myPause)  
  97.     }     
  98. }  
  99.   
  100. function go(){  
  101.     if (mode == 1){  
  102.         myInterval = setInterval("autoScroll()",speed)  
  103.     }  
  104.     if (mode == 0){  
  105.         myPause = setInterval("startScrolling()",3000)  
  106.     }     
  107. }  
  108.   
  109. myPause = setInterval("startScrolling()",3000)  
  110. </Script>  
  111. </head>  
  112. <body>  
  113.   
  114.   
  115.   
  116.   
  117.   
  118. <Script>  
  119. document.write('<table align="center" bgcolor=#333333 border=2 width="800px"><tr><td>')  
  120. for (ii=0;ii<kk;ii++){  
  121.   
  122. document.write('<a href = ' + pic[ii].link + ' target="mainFrame" ><img space=0 hspace=0 vspace=0 border=0 height=28 style=position:absolute;overflow:hidden;right:'+myright[ii]+'; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')  
  123.   
  124.   
  125. }  
  126. document.write('</td></tr></table>')  
  127.   
  128.   
  129. </Script>  
  130. </body>  
  131.   
  132.   
  133. </html>  
12

táblázat vs div

griphons · 2008. Jan. 10. (Cs), 10.21
A táblázatot nem muszály a scripten belül létrehozni, azt nyugodtan a <body> után beszúrhatod. De miért használsz táblát? Ezt nem értem. Használj <div> elemet. Elegánsabb, korszerűbb, nincs vele gond, főleg ha azt is absolute pozicionálod.
A másik megoldás, hogy az egész scroll.htm-et egy iframe-ben nyitod meg. (Az iframe-t célszerű divbe ágyazva pozicionálni az oldalra)
Valahogy így:
  1. <div style="position: absolute; top: 20px; left: 100px; width: 800px; height: 74px; margin: 0px; padding: 0px; overflow: hidden;">  
  2. <iframe src="scroll.htm" style="width: 800px; height: 74px; margin: 0px; padding: 0px; overflow: hidden;" frameborder="0"></iframe>  
  3. </div>  
Nálam gond szokott lenni ie alatt az iframe-mel, mert a nyomi ha kell ha nem kirak egy görgetősávot a kilógó képek miatt, ezért nagyobbra veszem az iframe-t mint a megjelenítendő képek hosszát, és az utolsó képet kitakarom egy felé rakott képpel, ami többnyire a site eleme, így nem látszik, ahogy megjelenik az új kép.
A div-et relatívra is veheted, az oldal közepére is állíthatod, stb.

Sok sikert!
13

Megyeget :)

fobee000 · 2008. Jan. 10. (Cs), 14.15
Köszi szépen a segítséget, sikerült összehoznom. Valóban, az ie hülyesége eléggé idegesítő a scrollbar-ral, ezt viszont sztem egyszerűbb megoldani egy scrolling="no" beállítással. Köszi mégegyszer