2016-01-04 5 views
0

У меня возникли проблемы с выяснением стиля стиля fancybox. В настоящий момент мои настройки, которые я установил, являются по частям из других мест.Fancybox 2: styling direct link

Я нашел кое-что о создании прямой ссылки на FancyBox изображения и вызывая функциональные лайтбоксе, который заключается в следующем:

<!-- Fancybox remote link trigger --> 
<script type="text/javascript"> 
    var thisHash = window.location.hash; 
     $(document).ready(function() { 
      if(window.location.hash) { 
       $(thisHash).fancybox().trigger('click'); 
      } 
      $('.fancylink').fancybox(); 

     }); // ready 
</script> 

Это прекрасно работает. Я установил идентификатор в каждой ссылке, и я могу получить прямой URL-адрес, который запускает fancybox, когда вы переходите к нему. Проблема, хотя я не понимаю, как правильно стилизовать fancybox, и, честно говоря, документация довольно слабая. Мне удалось стилизовать свою основную реализацию FancyBox через более по частям здесь:

<script type="text/javascript"> 
    var thisHash = window.location.hash; 
    $(document).ready(function() { 
     if(window.location.hash) { 
      $(thisHash).fancybox().trigger('click'); 
     } 
      $('.fancylink').fancybox(); 
     $(".fancybox").fancybox({ 
      helpers : { 
       title : { type : 'inside' } 
      }, // helpers 
      beforeShow : function() { 
       this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length; 
      } // beforeShow 
     }); // fancybox 
    }); // ready 
</script> 

Это все правильные варианты и стили, которые я хочу с второй линией, которая показывает количество фотографий, но я не понимаю, что для моей прямой ссылки код вверху. Я попытался объединить два, но не повезло, я либо обручу его, либо не получаю результат. Я предполагаю, что я смогу объединить эти два куска вместе, но я просто не знаю, как это сделать.

ответ

1

Вы просто должны предоставить варианты FancyBox на ваш рабочий код, как это:

EDIT. фиксированный превентивный код

<!-- Fancybox remote link trigger --> 
<script type="text/javascript"> 
    var thisHash = window.location.hash; 
    $(document).ready(function() { 

     $(thisHash).fancybox({ 
      helpers : { 
       title : { type : 'inside' } 
      }, // helpers 
      beforeShow : function() { 
       this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length; 
      } // beforeShow 
     }); 
     if(window.location.hash) { 
      $(thisHash).trigger('click'); 
     } 
    }); // ready 
</script> 
+0

Хм, я пробовал это, но он ломает fancybox. Если я нажму на ссылку, она перейдет на новую страницу с изображением. – dotcommer

+0

Вы проверили, вызывает ли консоль/firebug некоторую ошибку? – AndreaG

+0

Единственное, что я получаю с консоли (хром): Ресурс интерпретируется как Документ, но передается с типом MIME image/jpeg: [pathOfImage.jpg] – dotcommer