Jump to content

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


Recommended Posts

Парни, подскажите как прописать 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 есть 
А как сделать и для большого размера?

 

Link to post
Share on other sites

Парни, подскажите как прописать 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

Link to post
Share on other sites

Допишите атрибут 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=""...

Link to post
Share on other sites

Да в том то и дело, что прописать у ссылки 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 не предусмотрел 


 

Edited by madison21
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...