CMS Geeklog開発周辺覚書

 Thursday, November 21 2024 @ 06:40 PM JST

Mediagallery プラグイン　media自動タグでUIkitのmodalを使う方法

  • Wednesday, November 12 2014 @ 06:52 PM JST
  • 投稿者:
  • 表示回数 3,760
Geeklog

Mediagallery プラグインのmedia自動タグでUIkitのmodalとfadeを使う方法です。

事例：
http://www.ivysoho.com/databox/data.php/chile-moss/code

修正方法：
mediagallery/include/autotags.php:

from: 

$link = '<a class="lightbox" href="' . $url . '"' . ($target=='' ? '' : ' target="' . $target . '"') . '>' . $tagtext . '</a>';
to: 
			  $link = '
<div class="uk-text-center"><!-- This is the anchor toggling the modal -->
<a href="#'.$row['media_filename'].'" data-uk-modal><img src="'.$url.'" class="uk-border-roundeduk-animation-fade" style="-webkit-box-shadow: 5px 5px 15px 2px rgba(200,200,200,200); box-shadow: 5px 5px 15px 2px rgba(200,200,200,200); width: 640px; max-width: 100%; margin: 10px;" data-uk-scrollspy="{cls:\'uk-animation-fade\', repeat: true}"></a></div>

<!-- This is the modal -->
<div id="'.$row['media_filename'].'" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-frameless">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="'.$url.'" class="uk-border-rounded">
    </div>
</div>';