Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Pobranie obrazka z diva
Forum PHP.pl > Forum > Po stronie przeglądarki
renault12
Hej , mam taki problem, ze uzywam slidera na mojej stronie, wszystko dobrze dziala, obrazki sie zmieniaja tak jak powinny, za pomocą kodu html:
  1. <div id="slider" class="HFslider">
  2. <img src="2.jpg" />
  3. <img src="3.jpg" />
  4. <img src="4.jpg" />
  5. </div>


Lecz ja chce żebym na kazdym obrazku mogl umiescic tytul, czyli musialbym miec cos takiego:

  1. <div id="slider" class="HFslider">
  2. <div id="pic" style="background-image:url(2.jpg);>tekst</div>
  3. <div id="pic" style="background-image:url(3.jpg);>tekst</div>
  4. <div id="pic" style="background-image:url(4.jpg);>tekst</div>
  5. </div>


cały kod java script:
[JAVASCRIPT] pobierz, plaintext
  1. (function($) {
  2. $.fn.HFslider = function(params) {
  3. var hf_this = this;
  4.  
  5. function Slider() {
  6. this.images = new Array();
  7. this.width = hf_this.width(); //container width
  8. this.height = hf_this.height(); //container height
  9. this.slices = 10; // number of slices
  10. this.current_slide = 0;
  11. this.speed = 500;
  12. this.interval = 1000;
  13. this.nextSlide = function() {
  14.  
  15. setTimeout(function() {
  16. HFslider.images[HFslider.current_slide].animSlices();
  17. }, HFslider.interval);
  18.  
  19. };//end nextImage
  20. };
  21.  
  22. var HFslider = new Slider();
  23.  
  24. //begin inputs
  25. if (typeof params != "undefined" && typeof params.slices != "undefined") {
  26. HFslider.slices = params.slices;
  27. } // end if
  28. HFslider.slice_width = HFslider.width / HFslider.slices;
  29.  
  30. if (typeof params != "undefined" && typeof params.interval != "undefined") {
  31. HFslider.interval = params.interval;
  32. } // end if
  33.  
  34. if (typeof params != "undefined" && typeof params.speed != "undefined") {
  35. HFslider.speed = params.speed;
  36. } // end if
  37.  
  38. //end inputs
  39.  
  40. function Slice(slide,left,width,src) {
  41. this.slide = slide;
  42. this.left = left;
  43. this.width = width;
  44. this.src = src;
  45. }//end Slice
  46.  
  47. function Image(src) {
  48. this.src = src;
  49. this.slices = new Array();
  50.  
  51. var image = this;
  52. this.printSlices = function() {
  53.  
  54. for(var i=0; i < image.slices.length; i++ ) {
  55. jQuery('<div></div>', {
  56. 'class': 'slice',
  57. 'style': 'left:' + image.slices[i].left + 'px; width:' + HFslider.slice_width + 'px; background: url('+ image.src +') no-repeat -' + image.slices[i].left +'px 0px;'
  58. }).appendTo(image.slices[i].slide);
  59.  
  60. }// end for
  61.  
  62. }// end printSlices
  63.  
  64. this.animSlices = function() {
  65. var random_effect = Math.random();
  66. for(var i=0; i < image.slices.length; i++ ) {
  67. var callback = null;
  68. if (i == image.slices.length-1) { callback = image.nextImage; }
  69.  
  70. image.slices[i].slide.children('div:eq('+ i +')').animate({'width': '0px'},HFslider.speed + 100*i, callback);
  71.  
  72. }// end for
  73.  
  74. }// end animSlices
  75.  
  76. this.nextImage = function() {
  77. var next_slide = HFslider.current_slide + 1;
  78. if (next_slide == HFslider.images.length) { next_slide=0; }
  79.  
  80. hf_this.children('.slide').removeClass('current');
  81. hf_this.find('.slice').css({'width': HFslider.slice_width +'px', 'height':'100%', 'opacity': '1'});
  82. hf_this.children('.slide:eq('+ next_slide +')').addClass('current');
  83.  
  84. HFslider.current_slide = next_slide;
  85. HFslider.nextSlide();
  86. }//end resetSlices
  87.  
  88. }//end Image
  89.  
  90.  
  91. this.children('img').each(function() {
  92. HFslider.images.push(new Image($(this).attr('src')));
  93. });// end each img
  94.  
  95. if (HFslider.images.length) { //continue if there are some images
  96.  
  97. this.css({
  98. width : HFslider.width,
  99. height : HFslider.height
  100. });
  101.  
  102. this.html(''); //remove current images
  103.  
  104. for (var i=0; i < HFslider.images.length; i++) {
  105.  
  106. var slide_background_src = '';
  107. if (i<HFslider.images.length-1) { slide_background_src = HFslider.images[i+1].src; }
  108. else { slide_background_src = HFslider.images[0].src; }
  109.  
  110.  
  111. var slide = jQuery('<div></div>', {
  112. id: 'slide'+i,
  113. 'class': 'slide',
  114. 'style': 'background: url('+ slide_background_src +') no-repeat;'
  115. }).appendTo(this); //create a new slide and add to container
  116.  
  117. slide.css({
  118. width : HFslider.width,
  119. height : HFslider.height
  120. });
  121.  
  122.  
  123. var left = 0; // temp var
  124. for (var j=0; j < HFslider.slices; j++) {
  125. HFslider.images[i].slices.push ( new Slice (slide, left, HFslider.slice_width, HFslider.images[i].src) );
  126. left+= HFslider.slice_width;
  127. }//end for j
  128.  
  129. HFslider.images[i].printSlices();
  130.  
  131. } // end for i
  132.  
  133. this.children('#slide0').addClass('current'); // first visible
  134. HFslider.nextSlide();
  135.  
  136. }//end if imgages length
  137.  
  138. };//end HFslider
  139. }) (jQuery);
[JAVASCRIPT] pobierz, plaintext
justysia90
Raczej tego nie zrobisz w tym pluginie za dużo przeróbek i szkoda czasu w/g mnie - od siebie mogę polecić http://bxslider.com/ powinien spełnić wszystkie Twoje wymagania
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.