Перейти к содержимому


Фото
- - - - -

Alt для изображения при увеличении fancybox


  • Чтобы отвечать, сперва войдите на форум
3 ответов в теме

#1 madison21

madison21
  • Пользователь
  • 221 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Украина

Опубликовано 02.08.2019 - 23:49

Парни, подскажите как прописать alt для изображений, которые открываются во весь рост?
Сейчас реализовано так

<a href="{$product->image->filename|resize:800:600}" class="zoom fn" data-fancybox-group="group">
<img src="{$product->image->filename|resize:300:300}" alt="{$product->name|escape}{if $brand->name} ({$brand->name|escape}){/if}"/>
</a>

То есть когда в малом размере, то alt есть 
А как сделать и для большого размера?

 



#2 Noxter

Noxter
  • Забаненый
  • 1 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 03.08.2019 - 09:19

Парни, подскажите как прописать alt для изображений, которые открываются во весь рост?
Сейчас реализовано так

<a href="{$product->image->filename|resize:800:600}" class="zoom fn" data-fancybox-group="group">
<img src="{$product->image->filename|resize:300:300}" alt="{$product->name|escape}{if $brand->name} ({$brand->name|escape}){/if}"/>
</a>
То есть когда в малом размере, то alt есть 
А как сделать и для большого размера?


Допишите атрибут title
P.S. Не знал что у изображений есть рост :D

#3 phukortsin

phukortsin
  • Фрилансер
  • 988 сообщений
  • Программирование, Пользователь
  • Версия CMS:2.x
  • Откуда:Львов

Опубликовано 03.08.2019 - 09:36

Допишите атрибут title

 
Дописал так:

<a alt="alt1" title="title1" href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" title="title2" /></a>

 

В HTML-коде изображения "во весь рост" стоит пустой  alt=""...



#4 madison21

madison21
  • Пользователь
  • 221 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Украина

Опубликовано 03.08.2019 - 15:28

Да в том то и дело, что прописать у ссылки a атрибуты alt и title вопрос не решает.
Пустой alt всё равно.
Тут как то хитро нужно задать. через скрипт..

Для drupal встречал такую доработку для fancybox 

 

$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');

this.inner.find('img').attr('alt', alt);
}
});
 

ещё нашёл как добавляли data-alt

 

<script>
     $(".fancybox").fancybox({
       beforeShow: function () {
        var imgAlt = $(this.element).find("img").attr("alt");
        var dataAlt = $(this.element).data("alt");
        if (imgAlt) {
       $(".fancybox-image").attr("alt", imgAlt);
        } else if (dataAlt) {
       $(".fancybox-image").attr("alt", dataAlt);
      }
   }
});
</script>
 

 

на гитхабе
 

 

$("a.gallery-images").fancybox({


'onComplete' : function(links, index){
var self = $(links[index]);
var imageHtml = self[0];
var alt = $(imageHtml).find("img").attr("alt");
jQuery("#fancybox-wrap #fancybox-content #fancybox-img").attr('alt', alt);


}
});
 

 

 

может кто знает как это можно применить к нашей симпле?
altы картинок всё же нужны..
странно что разработчик fancybox не предусмотрел 


 


Изменено: madison21, 03.08.2019 - 15:33





0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых