Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP][CSS]Ograniczenie szerokości wyświetlanych fotek
Forum PHP.pl > Forum > Przedszkole
nikos
Witam mam problem z pewnym skryptem galerii zdjęć.
  1. <script type="text/javascript">
  2.  
  3. $(document).ready(function(){
  4.  
  5. $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
  6.  
  7. $('ul.gallery_demo').galleria({
  8. history : true, // activates the history object for bookmarking, back-button etc.
  9. clickNext : true, // helper for making the image clickable
  10. insert : '#main_image', // the containing selector for our main image
  11. onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
  12.  
  13. // fade in the image & caption
  14. image.css('display','none').fadeIn(1000);
  15. caption.css('display','none').fadeIn(1000);
  16.  
  17. // fetch the thumbnail container
  18. var _li = thumb.parents('li');
  19.  
  20. // fade out inactive thumbnail
  21. _li.siblings().children('img.selected').fadeTo(500,0.3);
  22.  
  23. // fade in active thumbnail
  24. thumb.fadeTo('fast',1).addClass('selected');
  25.  
  26. // add a title for the clickable image
  27. image.attr('title','Next image >>');
  28. },
  29. onThumb : function(thumb) { // thumbnail effects goes here
  30.  
  31. // fetch the thumbnail container
  32. var _li = thumb.parents('li');
  33.  
  34. // if thumbnail is active, fade all the way.
  35. var _fadeTo = _li.is('.active') ? '1' : '0.3';
  36.  
  37. // fade in the thumbnail when finnished loading
  38. thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
  39.  
  40. // hover effects
  41. thumb.hover(
  42. function() { thumb.fadeTo('fast',1); },
  43. function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
  44. )
  45. }
  46. });
  47. });
  48.  
  49. </script>

  1. <div class="demo">
  2. <div id="main_image"></div>
  3. <ul class="gallery_demo_unstyled">
  4.  
  5. <?php
  6.  
  7. while($r2 = mysql_fetch_assoc($foto)) {
  8. if(preg_match("/min/", $r2['image']) != 0) {
  9. }
  10. else{
  11.  
  12. echo '<li><img src="'.$r2['image'].'" width="320px;"/></li>';
  13.  
  14. }
  15.  
  16. }
  17. ?>
  18. </ul>
  19.  
  20. </div>

galeria.css wyglada tak
  1. .galleria{list-style:none;width:320px}
  2. .galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 5px 5px 0}
  3. .galleria li a{display:none}
  4. .galleria li div{position:absolute;display:none;top:0;left:280px}
  5. .galleria li div img{cursor:pointer}
  6. .galleria li.active div img,.galleria li.active div{display:block}
  7. .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto
    }
  8. .galleria li .caption{display:block;padding-top:.2em}
  9. .demo{position:relative;margin-top:2em; width:400px; float:right;}
  10. .gallery_demo{width:320px;margin:0 auto;}
  11. .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
  12. .gallery_demo li div{left:240px}
  13. .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
  14. #main_image{margin:0 auto 10px auto;height:320px;width:320px;background:white;}
  15. #main_image img{margin-bottom:10px;}
  16. .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
  17. .info{text-align:left;width:400px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
  18. .info p{margin-top:1.6em;}
  19. * html .galleria li div span{width:400px} /* MSIE bug */


Chciałem aby fotki miały szerokość 320px. Adresy do nich pobierane są z bazy mysql niestety jesli fotka jest wieksza to gdy ja chce wyswietlic wyswietla sie w swoim rozmiarze.
W jaki sposób to naprawić?
Pawel_W
  1. max-width: xx px;
  2. max-height: xx px;
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.