ファンシーボックスギャラリー

メインページ ►Moodle コースの管理 ► 活動 ► データフォーム ► 活動を操作する ► データフォームアプリケーション ►Fancyboxギャラリー
データフォーム
モジュール管理
活動を作成する
活動を使った作業
関連情報


  • ページビュー

  • ファンシーボックスビュー

Imageという名前のPictureフィールドを使用して（別の名前を希望する場合は、それに応じてビューhtmlのタグを変更する必要があります）、Repeatedエントリテンプレートの次のhtmlを使用してGalleryという名前のGridビューを作成します。

<xdiv class = "entry">
<xdiv style = "テキストの配置：中央、幅：100ピクセル、高さ：100ピクセル;" class = "imageTn"> ||画像|| </xdiv>
<xdiv class = "imageHref"> <xspan class = "hide"> ||画像：url || </xspan> </xdiv>
</xdiv>

（HTMLタグ名からxを削除）

残っているのは、それぞれのタブにFancybox関連のjavascriptとcssを追加することだけです。

Fancyboxはhttps://fancybox.net/からダウンロードできるライブラリです。ダウンロード用のzipには、fancyboxという名前のフォルダが含まれています。このフォルダには、アクセス可能な場所に展開して保存する必要があります。 1つの方法は、あなたのサイトにフォルダリコースを作成し、そこにファンシーボックスファイルを追加することです。

次に、javascriptタブに次のjavascriptを追加する必要があります。 googleapisのjqueryへの参照に注意してください。ローカルコピーを持っていて、代わりにそれを参照することができます。

含まれる外部js：


そしてjsコード： 

ゆい（ ） use （ 'node' 、 function （ Y ） {

   if （ Y. one （ '.dataformview-Gallery' ） ）） {
        VaRの thisView = Y.の1（ '.dataformview-ギャラリー'）;

        //サムネイルをリンクする
        var entries = thisView all （ '.entry' ） ;
        エントリーそれぞれ （ 機能 （ ent ） {
            var imgHolder = ent 1つ （ '.imageTn' ） ;
            var imgTn = imgHolder one （ 'img' ） ;
            var imgHref = ent 1つ （ '.imageHref span' ）です。 get （ 'innerHTML' ） ;
            var link = Y。 ノード 。 作成 （ '<a class="myGallery" rel="gallery" href="' + imgHref +'"> </a>の'）;
            リンク。 appendChild （ imgTn ） ;
            imgHolder appendChild （リンク） ;
        ; ）） ;

    $ （文書） ready （ function （ ） {
        $ （ "a.myGallery" ） fancybox （ {
            'transitionIn' ： '弾性' 、
            'transitionOut' ： '弾性' 、
            'speedIn' ： 600 、
            'speedOut' ： 200 、
             'overlayShow' ： true 、
            'opacity' ： 真 、
            '周期' ： 真
        ; ）） ;
    ; ）） ;
    }

; ）） ;

次にcssタブでfancybox cssへの参照を追加します。

含まれる外部CSS：

" https://docs.moodle.org/35/en/index.php?title=Fancybox_gallery&oldid=119771 "より作成