Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: preloader w php
Forum PHP.pl > Forum > PHP
murdock
czesc wszystkim .

Mam miniaturek zdjecia i chcialbym zrobic cos takiego ze po kliknieciu miniaturki pojawi sie preloader obrazujacy stan zaladowania a potem pojawi sie powiekszone zdjecie . Czy jest to mozliwe w php i prosil bym o jakies kody badz linki do stron bo nie moge tego znalesc sad.gif

Moj kod powiekszajacy zdjecie to :

$male = "6.JPG";
$duze = "6_resize.jpg";
$rozmiar = getimagesize($duze);
echo " <img src=\"$male\" alt=\"\" title=\"Powiększ zdjęcie\" style=\"cursor: pointer;\" class\"picture\" onclick=\"window.open('podglad.php?z=$duze','podglad','width=$rozmiar[0],height=$rozmiar[1],left=0,top=0')\" /> " ;


Moze trzeba jakos go zmodyfikowac

I drugie pytanie jak zrobic taki preloader(gdzie go wstawic) zeby uzuskac efekt jak na tej stronie http://remedy.ovh.org/

Dzieki z gory wszystkim za poswiecony czas.
blackD
Cytat(murdock @ 17.11.2006, 17:48:44 ) *
czesc wszystkim .

Mam miniaturek zdjecia i chcialbym zrobic cos takiego ze po kliknieciu miniaturki pojawi sie preloader obrazujacy stan zaladowania a potem pojawi sie powiekszone zdjecie . Czy jest to mozliwe w php i prosil bym o jakies kody badz linki do stron bo nie moge tego znalesc sad.gif

Moj kod powiekszajacy zdjecie to :

$male = "6.JPG";
$duze = "6_resize.jpg";
$rozmiar = getimagesize($duze);
echo " <img src=\"$male\" alt=\"\" title=\"Powiększ zdjęcie\" style=\"cursor: pointer;\" class\"picture\" onclick=\"window.open('podglad.php?z=$duze','podglad','width=$rozmiar[0],height=$rozmiar[1],left=0,top=0')\" /> " ;
Moze trzeba jakos go zmodyfikowac

I drugie pytanie jak zrobic taki preloader(gdzie go wstawic) zeby uzuskac efekt jak na tej stronie http://remedy.ovh.org/

Dzieki z gory wszystkim za poswiecony czas.



  1. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  2. // Progressbar - Version 2.0
  3. // Author: Brian Gosselin of http://scriptasylum.com
  4. // Featured on Dynamic Drive (http://www.dynamicdrive.com)
  5. // PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
  6. // DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
  7. // WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"
  8.  
  9. var imagenames=new Array(
  10. 'obrazy/_marcin2.jpg',
  11. 'obrazy/_misiek3.jpg',
  12. 'obrazy/drukuj.jpg',
  13. 'obrazy/fokston.jpg',
  14. 'obrazy/folder.jpg',
  15. 'obrazy/foto.jpg',
  16. 'obrazy/handshake.jpg',
  17. 'obrazy/muzyka.jpg',
  18. 'obrazy/nowosci.jpg',
  19. 'obrazy/tech.jpg',
  20. 'obrazy/zap.jpg',
  21. 'favicon.ico'
  22. );
  23. var yposition=350; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
  24. var loadedcolor='#FF0000' ; // PROGRESS BAR COLOR
  25. var unloadedcolor='#FFE0C0'; // BGCOLOR OF UNLOADED AREA
  26. var barheight=25; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
  27. var barwidth=300; // WIDTH OF THE BAR IN PIXELS
  28. var bordercolor='white'; // COLOR OF THE BORDER
  29.  
  30. //DO NOT EDIT BEYOND THIS POINT
  31. var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
  32. var IE4 = (document.all)? true : false;
  33. var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
  34. var imagesdone=false;
  35. var blocksize=barwidth/(imagenames.length);
  36. barheight=Math.max(barheight,25);
  37. var loaded=0, perouter, perdone, images=new Array();
  38. var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
  39. txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
  40. if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
  41. txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Trwa ładowanie strony, proszę czekać...</font></center></td></tr></table>';
  42. if(NS4) txt+='</layer>';
  43. txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
  44. txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Trwa ładowanie strony, proszę czekać...</font></center></td></tr></table>';
  45. txt+=(NS4)? '</layer></ilayer>' : '</div>';
  46. txt+='</td></tr></table>';
  47. txt+=(NS4)?'</layer>' : '</div>';
  48. document.write(txt);
  49. function loadimages(){
  50. if(NS4){
  51. perouter=document.perouter;
  52. perdone=document.perouter.document.layers[0].document.perdone;
  53. }
  54. if(NS6){
  55. perouter=document.getElementById('perouter');
  56. perdone=document.getElementById('perdone');
  57. }
  58. if(IE4){
  59. perouter=document.all.perouter;
  60. perdone=document.all.perdone;
  61. }
  62. cliplayer(perdone,0,0,barheight,0);
  63. window.onresize=setouterpos;
  64. setouterpos();
  65. for(n=0;n<imagenames.length;n++){
  66. images[n]=new Image();
  67. images[n].src=imagenames[n];
  68. setTimeout('checkload('+n+')' ,n*100);
  69. }}
  70. function setouterpos(){
  71. var ww=(IE4)? document.body.clientWidth : window.innerWidth;
  72. var x=(ww-barwidth)/2;
  73. if(NS4){
  74. perouter.moveTo(x,yposition);
  75. perouter.visibility="show";
  76. }
  77. if(IE4||NS6){
  78. perouter.style.left=x+'px';
  79. perouter.style.top=yposition+'px';
  80. perouter.style.visibility="visible";
  81. }}
  82. function dispbars(){
  83. loaded++;
  84. cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
  85. if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
  86. }
  87. function checkload(index){
  88. (images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
  89. }
  90. function hideperouter(){
  91. (NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
  92. imagesdone=true;
  93. skok();
  94. }
  95. function cliplayer(layer, ct, cr, cb, cl){
  96. if(NS4){
  97. layer.clip.left=cl;
  98. layer.clip.top=ct;
  99. layer.clip.right=cr;
  100. layer.clip.bottom=cb;
  101. }
  102. if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
  103. }
  104. window.onload=loadimages;
  105.  
  106. function skok(){
  107. if(imagesdone==true) {
  108. window.location="test.html"
  109. }
  110. }
  111. <NOSCRIPT>Trwa ładowanie strony, proszę czekać...</NOSCRIPT>
nitro18
A można jakoś zmodyfikować ten skrypt żeby pokazywał, że "załadowano jeden plik z 10 " lub "pobrano 150 z 350KB"?
skowron-line
mozesz np zrobic preloader w JS i niech pokazuje jakis gif po co masz sie babrac w jakies skomplikowane rzeczy no chyba ze chcesz
Strzałek
Hmmm.

Lightbox ? php w tym przypadku jest niepotrzebne winksmiley.jpg
murdock
Strzalek wielkie dzieki to dziala exclamation.gif!!!!!!!! , o to mi wlasnie chodzilo. Jak mozna przyznac soga daj znac zaglosuje na ciebie smile.gif . dziekuje tez pozostalym za podpowiedzi
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.