Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: нужно менять картинку в IMG при наведении мышки и задержке на нем..
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » нужно менять картинку в IMG при наведении мышки и задержке на нем..

Страниц (1): [1]
 

1. google_funny - 13 Января, 2016 - 00:17:40 - перейти к сообщению
Добрый день!
Если можно, помогите написать скрипт (я в яваскрипт не очень.. ), что сможет менять картинку из src для тега <img>, при наведении мышкой на <img> и задержке ее на там более чем на 1 сек. ( мне не особо критично для какого именно тега будут меняться картинки - главное чтобы работало, как описал ниже, возможно, это будет смена background-image для дочернего блока.. я уверен, это не сложно, но я не знаю, как это сделать.. если знающие люди помогут, буду очень признателен! )

Картинка должна меняться с интервалом в 1500 мс.
всего будет 16 картинок.
как достигнута 16-я картинка -- переходим к первой, и все заново.. и так до тех пор, пока пользователь не уберет курсор от <img>.

смена картинок должна начинатся с той, которая явно указана в теге <img>
<img src="site.com/image/22/31/12.jpg"> указана 12.jpg.. потом будет 13.jpg, 14.jpg, и т.д. по кругу, пока не достигнет 11.jpg, и начинаем по-новой...

Предварительно все 16 картинок, что потом будем каруселить при наведении.. - загружать не нужно!!
Загружается только та картинка, которая стоит в теге <img src="">, когда ее выдает браузер пользователю.

вот пример путей к картинкам
site.com/image/22/31/1.jpg
site.com/image/22/31/2.jpg
site.com/image/22/31/3.jpg
site.com/image/22/31/4.jpg
site.com/image/22/31/5.jpg
и т.д. до .... 16.jpg

это HTML разметка
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="main_image thumbs">        
  3.         <img src="site.com/image/22/31/12.jpg" alt="" width="259"/>
  4. </div>
  5.  
2. Viper - 13 Января, 2016 - 17:41:02 - перейти к сообщению
http://stackoverflow[dot]com/questio[dot][dot][dot]on-element-hover
http://bxslider[dot]com/examples

Самое простое дабы не изобретать велосипед.
3. google_funny - 13 Января, 2016 - 18:48:52 - перейти к сообщению
Viper
Спасибо, друг!
Это то, но не совсем.. сделать бы его как-то , чтобы он загружал все свои изображения только по мере необходимости, т.е когда будет наведение мышкой, и слайд должен быть активирован!
А не так как сейчас - грузит все свои слайды, и когда последний загрузится - только показывает слайдер-блок..
У меня на странице будет от 40 слайдер-блоков! по 16 изображений в каждом! - всего минимум 640 изображений .. и пока они все загрузятся, люди уйдут со страницы.. поэтому нужна загрузка, только когда слайд активный, и на него наводят мышкой...

вот и там ответил..
http://stackoverflow[dot]com/questio[dot][dot][dot]4772280#34772280

вот это примерно так, но вместо BuildPager: использовать бы BuildSlides и динамически создавать слайды.. только при наведении мышкой..
http://bxslider[dot]com/examples/thumbnail-pager-2

------------------
сладера есть свойство -
preloadImages
If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions)

default: visible
options: 'all', 'visible'
-----------------
Но все-равно, если разметка для слайдера будет примерно такой..
CODE (html):
скопировать код в буфер обмена
  1. <ul class="bxslider">
  2.   <li><img src="/images/730_200/tree_root.jpg" /></li>
  3.   <li><img src="/images/730_200/houses.jpg" /></li>
  4.   <li><img src="/images/730_200/hill_fence.jpg" /></li>
  5. </ul>

Тогда все-равно будут загружаться браузером все изображения (даже, если активным будет как-то один слайд и установлено preloadImages 'visible'), и пока последнее не загрузится - слайдер не отобразится)
4. google_funny - 14 Января, 2016 - 05:32:57 - перейти к сообщению
.. но вот как я не извращался.. блин.. целый день потратил на эту чертову функцию.. но так ничего и не заработало.. не выходит! Я вот подключил библиотеку JQuery пишу.. ну ничего не получается.. помогите.. что не так? вот дописался..
Это объект
CODE (text):
скопировать код в буфер обмена
  1. <img width="259" alt="MOVIE!" src="http://localhost/catalog/gallery_html/videos/201112/original/12.jpg" data-thumb="12" class="video-thums">


data-thumb="12" - это номер активного слайда.. (от 1 до 16) Он должен всегда совпадать с картинкой, что для IMG в данном случае - это 12 и картинка ...../12.jpg и т.д.

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.  
  4. $("img.video-thums")
  5.         .mouseover(function() {                        
  6.                 setInterval(function(){
  7.                         var num=$(this).attr("data-thumb");                    
  8.                                 num++;
  9.                                 if(num>16){
  10.                                         num=1;
  11.                                 }
  12.                                 $(this).attr('data-thumb', num);
  13.                                 $(this).attr('src', 'http://localhost/catalog/gallery_html/videos/201112/original/'+num+'.jpg');
  14.                                 $(this).css('opacity', 0);
  15.                                 $(this).animate({'opacity': 1}, 600);                  
  16.                        
  17.                 },1000);
  18.                        
  19.         });      
  20.        
  21.  
  22.         });
5. google_funny - 14 Января, 2016 - 07:46:35 - перейти к сообщению
Нашел решение...

В общем, не знаю, почему так происходит.. но додумался вот до такого.. И все заработало! Большое вам спасибо, ВАЙПЕР! Очень вам благодарен, что помогаете!

разметка..
CODE (text):
скопировать код в буфер обмена
  1. <img width="259" alt="" src="http://localhost/catalog/gallery_html/videos/201112/original/3.jpg" data-gallery="http://localhost/catalog/gallery_html/videos/201112/original" data-thumb="3" class="video-thums">

Спойлер (Отобразить)

(Добавление)
Только вот нужно еще немного подправить скрипт..
нужно отображать новую картинку, только когда предыдущая картинка полностью загрузилась..

Появились случаи, когда он перелистывает картинки, даже не успевая их загрузить.. как это реализовать?
6. king22 - 27 Декабря, 2016 - 19:01:33 - перейти к сообщению
Мне нужно то же самое. Имеется 15 картинок вида:

CODE (htmlphp):
скопировать код в буфер обмена
  1. site.com/image/22/thumbs/00000001.jpg
  2. site.com/image/22/thumbs/00000002.jpg
  3. site.com/image/22/thumbs/00000003.jpg
  4. site.com/image/22/thumbs/00000004.jpg
  5.          ...
  6. site.com/image/22/thumbs/00000015.jpg


Также надо, чтоб при наведении мышки было слайд шоу с интервалом 1 сек. Так в чём же дело, спросите вы? А дело в том, что в батниках я ещё понимаю, но не в html. Вот если бы кто объяснил мне куда, в какой файл, выше приведённые коды надо положить, или как эти коды в один файл положить, как назвать эти файлы? Спасибо.
(Добавление)
Пока получилось с 15 -ю картинками, как отобразить, если число картинок неопределенно, то есть, если очередной картинки нет на сервере, начиналось бы сначало с первого рисунка?

1.html
CODE (htmlphp):
скопировать код в буфер обмена
  1. <!doctype html>
  2. <html>
  3. <body>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  5. <script src="script2.js"></script>
  6. <img width="259" alt="" src="http://videos/thumbs/00000001.jpg" data-gallery="http://videos/thumbs/0000000" data-thumb="1" class="video-thums">
  7. </body>
  8. </html>


script2.js
CODE (htmlphp):
скопировать код в буфер обмена
  1.       $(document).ready(function(){
  2.           $('img.video-thums')
  3.           .hover(function() {
  4.               var _this = this,
  5.               gallery = _this.getAttribute('data-gallery'),
  6.               counter = _this.getAttribute('data-thumb');
  7.               _this.timer = setInterval(function() {
  8.                   if(counter > 16) {
  9.                       counter = 1;
  10.                   }
  11.                   if(counter < 10) {
  12.                      _this.src=gallery+'0'+counter+'.jpg';
  13.                      _this.setAttribute('data-thumb',  counter);
  14.                      counter++;
  15.                  }
  16.                  if(counter > 9) {
  17.                       _this.src=gallery+counter+'.jpg';
  18.                       _this.setAttribute('data-thumb',  counter);
  19.                       counter++;
  20.                   }
  21.               }, 1000);
  22.           }, function() {
  23.               //this.src = this.getAttribute('data-src');
  24.               clearInterval(this.timer);
  25.           });
  26.       });

 

Powered by ExBB FM 1.0 RC1