imgtagD3 のランダム画像ブロックをスライドショーしてみた

カテゴリ作業メモの最新配信
RSS
RDF
ATOM

ブログ - imgtagD3 のランダム画像ブロックをスライドショーしてみた

imgtagD3 のランダム画像ブロックをスライドショーしてみた

カテゴリ :: 作業メモ

執筆 :: masa 2015/11/19

imgtagD3 のランダム画像ブロックを
高機能な jQuery スライドショー Camera Slideshow を使って
スライドショーにしてみた

「camera」の基本的な使い方については下の参考サイトを参照

imgtagD3 に埋め込むには block_rphoto.html テンプレートを編集する。
まるごと差し替え


    <style>
	.fluid_container {
	margin: 0 auto;
	max-width: 480px;
	height: 400px;
	}
    </style>
    <script>
	jQuery(function(){
		jQuery('#camera_wrap_test').camera({
		height: '75%', time: 5000,
		});
	});
    </script>
<div class="fluid_container">
    <div class="camera_wrap  camera_chocolate_skin" id="camera_wrap_test">
    <{foreach item=photo key=count from=$block.photo}>
       <div data-src="<{$block.mod_url}>/index.php?page=image&amp;id=<{$photo.lid}>&amp;sz=2&amp;"
           data-thumb="<{$block.mod_url}>/index.php?page=image&amp;id=<{$photo.lid}>&amp;sz=0&amp;"
           data-link="<{$block.mod_url}>/index.php?page=photo&amp;lid=<{$photo.lid}>&amp;cid=<{$photo.cid}>">
          <div class="camera_caption fadeIn"><{$photo.cat_title}></div>
        </div>
    <{/foreach}>
    </div>
</div>

なぜか data-src で指定した URL に ?nnnnnn のようなデータが追加されてアクセスされてしまい、正しく画像が読み込まれないという現象があった。
しかたなしに最後に & を付けてごまかしている

動作に必要な javascript と css はテーマファイルで読み込んでおいた。


    <link rel='stylesheet' id='camera-css'
	href='<{$xoops_url}>/themes/camera_ss/css/camera.css' type='text/css' media='all'>


    <script type='text/javascript' 
	src='<{$xoops_url}>/themes/camera_ss/scripts/jquery.mobile.customized.min.js'></script> 
    <script type='text/javascript'
	src='<{$xoops_url}>/themes/camera_ss/scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript'
	src='<{$xoops_url}>/themes/camera_ss/scripts/camera.min.js'></script>

script での読み込みを head セクションで実行した場合は、うまく動作しなかったので、BODY の後ろの方に埋め込んだ。
また、ブロックテンプレートで読み込んだ場合も、モバイルの場合だけうまくいかなかった...

[参考サイト]

Camera | a free jQuery slideshow by Pixedelic(配布元サイト)

ソースダウンロード (github)

今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」

トラックバック (0)
閲覧 (3526)