Как создать прямую ссылку на любую коробку fancybox - PullRequest
Новая
       9

Как создать прямую ссылку на любую коробку fancybox

8 голосов
/ 27 января 2012

Мне нужно, чтобы, когда я щелкаю во всем, что использует fancybox, он генерирует определенный URL для этого, поэтому, когда я отправляю эту ссылку кому-то, он открывает конкретное поле, которое я хочу.* fancybox.net / home , когда я нажимаю на первом изображении, ссылка все еще fancybox.net / home Я хочу, чтобы, когда я нажимаю визображение, URL генерируется и появляется в адресной строке как: fancybox.net / home / imageid = 1 , поэтому, когда я отправляю fancybox.net / home/ imageid = 1 кому-то это уже открывает изображение в коробке

Спасибо!

(Это как фотографии на фейсбуке, когда вы нажимаете на любую фотографию, фотографияоткрывается в окне, но адресная строка меняется на ссылку изображения)

////// ОБНОВЛЕНИЕ № 1 //////

Я сделал то, чтоJFK предложил, но после одного часа попытки я все еще не знаю, почему ящики не совпадают.

Посмотрите на разницу:

код: 

<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function() {
if(window.location.hash) {
$(thisHash).fancybox({
    prevEffect : 'none',
    nextEffect : 'none',
    closeBtn  : false,
    arrows    : true,
    nextClick : true,
    helpers :   { 
            thumbs : {
                width  : 80,
                height : 80
            },
    title : {
            type : 'inside'
            },
    buttons : {}
                },

    afterLoad : function() {
            this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>';
            }

                }).trigger('click');
 }
 $('.fancylink').fancybox({
    prevEffect : 'none',
    nextEffect : 'none',
    closeBtn  : false,
    arrows    : true,
    nextClick : true,
    helpers :   { 
            thumbs : {
                width  : 80,
                height : 80
            },
    title : {
            type : 'inside'
            },
    buttons : {}
                },

    afterLoad : function() {
            this.title = (this.index + 1) + ' de ' + this.group.length     + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>';
            }

                });
}); // ready
</script>

Чтонеправильно в этом сценарии?

1 Ответ

14 голосов
/ 27 января 2012

Во-первых, вам все еще нужно иметь ссылки на ваши изображения на странице, которая открывает fancybox, например: 

<a id="image01" class="fancylink" rel="gallery" href="images/01.jpg" title="image 01">open image 01</a>
<a id="image02" class="fancylink" rel="gallery" href="images/02.jpg" title="image 02">open image 02</a>

... и т. Д.

Обратите внимание , что я добавляю ID и class к каждой привязке, так как единственный способ, которым я должен нацелить их через URL-адрес, - через их идентификатор ... класс будет использоваться чтобы регулярно открывать эти изображения в fancybox, как только я окажусь на странице, чтобы мне не нужно было писать конкретный код fancybox для каждого идентификатора.

затем установите этот скрипт на странице ссылки: 

<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, который нацелен на каждое изображение, например 

http://mydomain.com/page.html#image01

или 

http://mydomain.com/page.html#image02

и т.д.

хочешь работать демо?

http://picssel.com/playground/jquery/targetByID_28jan12.html#image01

http://picssel.com/playground/jquery/targetByID_28jan12.html#image02

ПРИМЕЧАНИЕ : Этот код предназначен для fancybox v1.3.x, поскольку вы использовали fancybox.net в качестве справочного материала.

ОБНОВЛЕНИЕ # 1 : если вам нужны опции fancybox, вам нужно добавить их в оба селектора ID и class, например: 

<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function() {
 if(window.location.hash) {
  $(thisHash).fancybox({
    padding: 0
    // more API options
  }).trigger('click');
 }
 $('.fancylink').fancybox({
    padding: 0
    // more API options
 });
}); // ready
</script>

Конечно, используйте правильные опции для fancybox v1.3.x или 2.x

...