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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: нужно менять картинку в IMG при наведении мышки и задержке на нем..

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
google_funny
Отправлено: 13 Января, 2016 - 00:17:40
Post Id


Новичок


Покинул форум
Сообщений всего: 27
Дата рег-ции: Дек. 2015  


Помог: 0 раз(а)




Добрый день!
Если можно, помогите написать скрипт (я в яваскрипт не очень.. ), что сможет менять картинку из 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.  
 
 Top
Viper
Отправлено: 13 Января, 2016 - 17:41:02
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




http://stackoverflow[dot]com/questio[dot][dot][dot]on-element-hover
http://bxslider[dot]com/examples

Самое простое дабы не изобретать велосипед.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
google_funny
Отправлено: 13 Января, 2016 - 18:48:52
Post Id


Новичок


Покинул форум
Сообщений всего: 27
Дата рег-ции: Дек. 2015  


Помог: 0 раз(а)




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'), и пока последнее не загрузится - слайдер не отобразится)

(Отредактировано автором: 13 Января, 2016 - 19:07:39)

 
 Top
google_funny
Отправлено: 14 Января, 2016 - 05:32:57
Post Id


Новичок


Покинул форум
Сообщений всего: 27
Дата рег-ции: Дек. 2015  


Помог: 0 раз(а)




.. но вот как я не извращался.. блин.. целый день потратил на эту чертову функцию.. но так ничего и не заработало.. не выходит! Я вот подключил библиотеку 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.         });

(Отредактировано автором: 14 Января, 2016 - 05:38:18)

 
 Top
google_funny
Отправлено: 14 Января, 2016 - 07:46:35
Post Id


Новичок


Покинул форум
Сообщений всего: 27
Дата рег-ции: Дек. 2015  


Помог: 0 раз(а)




Нашел решение...

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

разметка..
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">

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

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

Появились случаи, когда он перелистывает картинки, даже не успевая их загрузить.. как это реализовать?
 
 Top
king22
Отправлено: 27 Декабря, 2016 - 19:01:33
Post Id


Новичок


Покинул форум
Сообщений всего: 1
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




Мне нужно то же самое. Имеется 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.       });

(Отредактировано автором: 27 Декабря, 2016 - 21:01:06)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB