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 :: вывод названия для картинки в галерее JS

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
andre
Отправлено: 22 Января, 2013 - 17:36:32
Post Id


Гость


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


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

[+]
на сайте есть что-то вроде галереи,где с правой стороны маленькие фотография,а с левой выводится та фотография,на которую кликнули,но уже в большем размере.теперь нужно,что бы под этой большей фотографией выводилось ее имя.как это можно сделать?
CODE (javascript):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2.                         $(window).load(function() {
  3.                         // We only want these styles applied when javascript is enabled
  4.                         $('div.navigation').css({'width' : '320px', 'float' : 'right'});
  5.                         $('div.content').css('display', 'block');
  6.        
  7.                         // Initially set opacity on thumbs and add
  8.                         // additional styling for hover effect on thumbs
  9.                         var onMouseOutOpacity = 0.5;
  10.                         $('#thumbs ul.thumbs li span').opacityrollover({
  11.                                 mouseOutOpacity:   onMouseOutOpacity,
  12.                                 mouseOverOpacity:  0.0,
  13.                                 fadeSpeed:         'fast',
  14.                                 exemptionSelector: '.selected'
  15.                         });
  16.                        
  17.                         // Initialize Advanced Galleriffic Gallery
  18.                         var gallery = $('#thumbs').galleriffic({
  19.                                 delay:                     7000,
  20.                                 numThumbs:                 12,
  21.                                 preloadAhead:              6,
  22.                                 enableTopPager:            false,
  23.                                 enableBottomPager:         false,
  24.                                 imageContainerSel:         '#slideshow',
  25.                                 controlsContainerSel:      '',
  26.                                 captionContainerSel:       '',
  27.                                 loadingContainerSel:       '',
  28.                                 renderSSControls:          true,
  29.                                 renderNavControls:         true,
  30.                                 playLinkText:              'Play Slideshow',
  31.                                 pauseLinkText:             'Pause Slideshow',
  32.                                 prevLinkText:              'Prev',
  33.                                 nextLinkText:              'Next',
  34.                                 nextPageLinkText:          'Next',
  35.                                 prevPageLinkText:          'Prev',
  36.                                 enableHistory:             true,
  37.                                 autoStart:                 7000,
  38.                                 syncTransitions:           true,
  39.                                 defaultTransitionDuration: 900,
  40.                                 onSlideChange:             function(prevIndex, nextIndex) {
  41.                                         // 'this' refers to the gallery, which is an extension of $('#thumbs')
  42.                                         this.find('ul.thumbs li span')
  43.                                                 .css({opacity:0.5})
  44.                                 },
  45.                                 onPageTransitionOut:       function(callback) {
  46.                                         this.find('ul.thumbs li span').css({display:'block'});
  47.                                 },
  48.                                 onPageTransitionIn:        function() {
  49.                                         this.find('ul.thumbs li span').css({display:'none'});
  50.                                 }
  51.                         });
  52.                 });
  53.         </script>


вот фото,которое в альбоме

CODE (html):
скопировать код в буфер обмена
  1.  <div id="thumbs" class="navigation1">
  2.                                         <ul class="thumbs noscript">
  3.                                             <li><a class="thumb" href="images/gallery-img1.jpg" title=""> <img src="images/1.jpg" alt="" /> </a></li>
  4.                                             <li><a class="thumb" href="images/gallery-img2.jpg" title=""> <img src="images/2.jpg" alt="" /> </a></li>
  5.                                             <li><a class="thumb" href="images/gallery-img3.jpg" title=""> <img src="images/3.jpg" alt="" /> </a></li>
  6.                                            <li><a class="thumb" href="images/gallery-img4.jpg" title=""> <img src="images/4.jpg" alt="" /> </a></li>
  7.                                            <li><a class="thumb" href="im/gallery-img5.jpg" title=""> <img src="images/5.jpg" alt="" /></a></li>
  8.                                             <li><a class="thumb" href="im/gallery-img6.jpg" title=""> <img src="images/6.jpg" alt="" /> </a></li>
  9.                                         </ul>
  10.                                     </div>
  11. НАЗВАНИЕ ФОТО ДОЛЖНО ВЫВООДИТЬСЯ ЗДЕСЬ
  12.  

Прикреплено изображение (Нажмите для увеличения)
New Picture (15).jpg

(Отредактировано автором: 22 Января, 2013 - 17:41:39)

 
 Top
prgrant
Отправлено: 23 Января, 2013 - 13:14:18
Post Id


Новичок


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


Помог: 0 раз(а)
Сделайте событие, в котором, при клике на следующую картинку, выводится её title (название картинки) в div (вывод названия).
 
 Top
Zuldek
Отправлено: 23 Января, 2013 - 13:21:42
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2122
Дата рег-ции: Июнь 2010  


Помог: 50 раз(а)
prgrant пишет:
Сделайте событие, в котором, при клике на следующую картинку, выводится её title (название картинки) в div (вывод названия).

Смотрите пожалуйста в код прежде чем отвечать Подмигивание
Цитата:
как это можно сделать?

Живой пример -
http://www[dot]twospy[dot]com/galleriffic/example-2[dot]html
Мануал -
http://www[dot]twospy[dot]com/galleriffic/
 
 Top
prgrant
Отправлено: 23 Января, 2013 - 13:23:10
Post Id


Новичок


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


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

CODE (htmlphp):
скопировать код в буфер обмена
  1. <div id="thumbs" class="navigation1">
  2.     <ul class="thumbs noscript">
  3.       <li><a class="thumb" href="images/gallery-img1.jpg" title="название фото 1"> <img src="images/1.jpg" alt="" /> </a></li>
  4.       <li><a class="thumb" href="images/gallery-img2.jpg" title="название фото 2"> <img src="images/2.jpg" alt="" /> </a></li>
  5.       <li><a class="thumb" href="images/gallery-img3.jpg" title="название фото 3"> <img src="images/3.jpg" alt="" /> </a></li>
  6.       <li><a class="thumb" href="images/gallery-img4.jpg" title="название фото 4"> <img src="images/4.jpg" alt="" /> </a></li>
  7.       <li><a class="thumb" href="im/gallery-img5.jpg" title="название фото 5"> <img src="images/5.jpg" alt="" /></a></li>
  8.       <li><a class="thumb" href="im/gallery-img6.jpg" title="название фото 6"> <img src="images/6.jpg" alt="" /> </a></li>
  9.       </ul>
  10.     </div>
  11. <div id = "title">НАЗВАНИЕ ФОТО ДОЛЖНО ВЫВООДИТЬСЯ ЗДЕСЬ</div>


Вот что в событии:
$('#title').html($('.thumb').attr('title'))

(Отредактировано автором: 23 Января, 2013 - 13:24:54)

 
 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