0

さまざまなファンシーボックスギャラリーを開く複数のリンクを含む単一のページがあります。

各ギャラリーは、次のようなリンク (この場合は「galleryone」) をクリックすることで「アクティブ化」されます。

<a class="manualfancybox" data-gallery="galleryone" name="galleryone" id="galleryone" href="#galleryone">
    <img src="imageToClickToOpenGallery.png" />
</a>

各ギャラリー (この場合は「galleryone」) は、次のコードによって作成されます。

<div id="galleryone">
    <a href="001.jpg" rel="gal_one" class="fancybox" /></a>
    <a href="002.jpg" rel="gal_one" class="fancybox" /></a>
    […]
    <a href="020.jpg" rel="gal_one" class="fancybox" /></a>
</div>

ユーザーが「imageToClickToOpenGalleryOne.png」をクリックすると、「galleryone」fancyboxがフルスクリーンで開きます（JFKに感謝します。大丈夫です。まさにそうあるべきです。

「Manual Fancybox」では、次の jquery を使用します。

/* MANUALFANCYBOX by JFK (https://stackoverflow.com/users/1055987/jfk) */
$(document).ready(function () {
    $(".manualfancybox").on("click", function () {
        var gallery = "#" + $(this).data("gallery");
        $(gallery).find(".fancybox").eq(0).click();
        return false;
    });
});

質問:ユーザーが私のページにアクセスして「imageToClickToOpenGalleryOne.png」をクリックした場合のように、 http: //www.mysite.com/#galleryone のように「galleryone」を開くリンクを作成するにはどうすればよいですか?

Javascript、jquery、php… .htaccess?? 私自身、解決策を達成するどころか、それを考えることができません…</p>

セキュリティ上の理由からそれができないのかもしれませんが、ギャラリーへのリンクを共有するためのソリューションが必要です...

4

2 に答える 2

1

このようなリンクの場合

http://www.mysite.com/#galleryone

これを現在のコードに追加するだけです：

if(window.location.hash) { 
    $(window.location.hash).trigger('click'); 
}

重要:初期化の後 (またはメソッドの最後) にこれを配置するようにしてください。fancybox()ready()

編集：OPは言った：

it's working but it's not showing the gallery background anymore, 
therefore I can't click anywhere outside the image 
to close the image window (it does work with "ESC" key though).

問題を巻き上げているようです。スクリプト呼び出しを次の順序で配置してみてください。

<script src="../scripts/jquery.fancybox.min.js" type="text/javascript"></script> 
<script src="../scripts/scripts.js" type="text/javascript"></script>

Fancybox は、コードを配置した scripts.js の前に呼び出す必要があります。現在、scripts.jsが最初に呼び出されます。$(window.location.hash).trigger('click');

于 2013-09-09T16:35:33.607 に答える
1

URLでフラグメント識別子を使用したい。これを取得するには、 を使用しwindow.location.hashてハッシュ記号からすべてを取得します。例: " http://example.com#foobar " にlocation.hashは "#foobar" の イベントをチェックして[window.onhashchange][1]、ハッシュが変更されたかどうかを確認できます。その後、ハッシュを解析して、必要なものをロードできます。

于 2013-09-08T14:06:09.480 に答える