У данного метода есть два существенных преимущества: сокращение ручной работы при заполнении, всего лишь добавить класс к изображению для инициализации highslide js (не нужно создавать отдельно мини – эскиз, размещать два изображения в контексте страницы, одно – тегом img, второе – ссылкой, задавать атрибуты title и rel="nofollow" для ссылки), и уменьшение «пустых» ссылок на странице для поисковых роботов.

   Примечание автора: если Вы не знаете, что такое highslide js, для начала прочтите, как внедрить библиотеку highslide js в код Вашей страницы. Так же там Вы найдёте примеры работы галереи.

Назначим каждой картинке, которую хотим увеличить, класс highslide-image и зададим описание изображения в свойстве alt.

<img class="highslide-image" alt="описание картинки" ...

   Совет: если картинкам уже назначен класс, просто сделайте пробел в свойстве class после его названия и добавьте highslide-image.

<img class="image highslide-image" alt="описание картинки" ...

   Для начала нам нужно интересующие нас изображения – оригиналы ограничить по ширине или высоте для размещения в виде мини – эскизов. Воспользуемся css селектором класса, добавим в код страницы или в css файл шаблона, например, ограничим по ширине:

. highslide-image{
 width: 200px;
 height: auto;
}

   Примечание: достаточно второму параметру height или width назначить значение auto, и браузер автоматически отмасштабирует изображение по ширине или высоте.

   А теперь внедрим нужный javascript в секцию head (между <head>[наш код]</head>) страницы.

   Рассмотрим примеры автоматического добавления Highlside js с помощью Javascript DOM, Mootools, JQuery:

   Javascript DOM:

<script type="text/javascript">
function wrapHighslide(){
        var allImages   = document.images;
        var iLength     = allImages.length;
        var hImage      = [];
        for(var i = 0; i < iLength; i ++){
           if(typeof allImages[i].className != "unedfined"
                && allImages[i].className
    && allImages[i].className.toLowerCase().indexOf("highslide-image") !== -1){
            var hLength     = hImage.length;
            hImage[hLength] = allImages[i];
           }
        }
        var hLength = hImage.length;
        if(hLength){
            for(var i = 0; i < hLength; i ++){
            var aLink  = document.createElement("a");
            var iSrc   = hImage[i].src;
            var iTitle = (typeof hImage[i].alt != "undefined"
                        && hImage[i].alt != "")
                        ? hImage[i].alt
                        : "";
            iTitle     = (iTitle == ""
                        && typeof hImage[i].title != "undefined"
                        && hImage[i].title != "")
                        ? hImage[i].title
                        : "";
            iTitle     = (iTitle == "")
                        ? document.title
                        : iTitle;
            var aClassName = document.createAttribute("class");
            aClassName.nodeValue = "highslide";
            aLink.setAttributeNode(aClassName);
            var aTitle = document.createAttribute("title");
            aTitle.nodeValue = iTitle;
            aLink.setAttributeNode(aTitle);
            var aHref = document.createAttribute("href");
            aHref.nodeValue = iSrc;
            aLink.setAttributeNode(aHref);
            hImage[i].parentNode.insertBefore(aLink,hImage[i]);
            aLink.appendChild(hImage[i]);
            aLink.onclick = function(){
            return hs.expand(this);
                };
            }
        }
    }
    if(typeof window.addEventListener != "undefined"){
        window.addEventListener("load", wrapHighslide, false);
    } else if(typeof window.attachEvent != "undefined"){
        window. attachEvent("onload", wrapHighslide);
    }
</script>

   Mootools:

<script type="text/javascript">
window.addEvent('domready',function(){
  $$('.highslide-image').each(
   function(item){
   var iSrc   = item.src;
   var iTitle = (item.alt != "")
                ? item.alt
                : "";
   iTitle     = (iTitle == ""
                && item.title != "")
                ? item.title
                : "";
   iTitle     = (iTitle == "")
                ? document.title
                : iTitle;
   var aElt = new Element('a',{
       'class':'highslide',
       'href':iSrc,
       'title':iTitle
   })
   aElt.onclick     =  function(){
       return hs.expand(this);
   };
   aElt.inject(item,'after');
   item.inject(aElt);
              }
          );
});
</script>

   JQuery:

<script type="text/javascript">
$(document).ready(function(){
        $(".highslide-image").each(function() {
          $(this).wrap(function(){
            var iTitle = (this.alt != "")
                            ? this.alt
                            : "";
            iTitle     = (iTitle == ""
                            && this.title != "")
                            ? this.title
                            : "";
            iTitle     = (iTitle == "")
                            ? document.title
                            : iTitle;
            return '<a href="' + $(this).attr('src') + '" class="highslide" onclick="return hs.expand(this);" />';
          });
        });
});
</script>

   Маленькие хитрости, применённые в указанном подходе:

  • для highslide js требуется переопределять событие onclick по умолчанию для вновь созданной ссылки, добавление же дополнительных обработчиков для события click addEventListener или AttachEvent приведёт к ошибке;
  • в контексте функции onclick не делайте отмену распространения событий через неявный объект события event, иначе это приведёт к ошибке, просто возвращайте функцию самого объекта hs.expand, которая, в случае удачной инициализации, вернёт false и отменит переход по ссылке;
  • если у Вас highslide js настроен с отображением в описании заголовка галереи: мы корректно проверяем alt и title для изображения, и назначаем свойство title для созданной ссылки согласно alt, либо title, либо document.title (заголовок страницы).

   Примечание автора: все скрипты, приведённые выше, кроссбраузерные, и отлично работают в опере, файрфоксе и IE. Будут совместимы со всеми версиями указанных библиотек, даже очень старыми.

   Вот и всё, теперь после загрузки страницы у изображения с классом highslide-image появится ссылка, щелкнув по которой Вы откроете изображение в галерее highslide js.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика