質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1918閲覧

Wordpress: Advanced Custom Fieldから画像ギャラリーの背景色を指定したい。

Tats.N

総合スコア62

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2016/05/10 04:42

編集2022/01/12 10:55

こんにちは。いつもありがとうございます。

画像ギャラリーサイトを作っています。
Advanced Custom FieldのSelectメニューからSwipeBox.jsの背景色を変更できるようにしたいのですが、画像ごとに背景色を切り替える方法はありますか?

html

1<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <?php $artimage = get_field("artwork-image");?> 3 <?php $bgcolor = get_field("bg-color");?> 4 5 <li class="a-post"> 6 <img src="<?php echo $artimage['url']?>"> 7 <a rel="gallery" class="swipebox" href="<?php echo $artimage['url']?>"><?php the_title();?></a> 8 </li> 9 10 <style> 11 #swipebox-overlay{ 12 background-color: <?php echo $bgcolor?>; 13 } 14 </style> 15 16 <?php endwhile; endif; ?>

ループ内で#swipebox-overlayを変えようとすると一番最初に取ったbackground-colorがそのまま残ります。。。
それと実際にモーダルウインドウとして表示されるのはこのループ内のimgではなくSwipeBox.jsにより作られたdivによってループ外で表示されます。

どうすれば一枚一枚の画像に別の背景色を選ぶことができますか?よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

これで動くかな。ソースを見ると nextSlide( index ) prevSlide( index ) が用意して有るので、それを使うのがいいでしょう。

PHP

1<script>var arr = [];</script> 2<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 3 4 <!-- >(中略)< --> 5 6 <script>arr.push( '<?php echo $bgcolor?>' );</script> 7<?php endwhile; endif; ?> 8<script> 9;( function( $ ) { 10 var func = function( index ) { 11 $( '#swipebox-overlay' ).css( 'background-color', arr[ index ] ); 12 }; 13 $( '.swipebox' ).swipebox( { 14 nextSlide: func 15 , prevSlide: func // ,が抜けていました、すいません。 16 } ); 17 18} )( jQuery ); 19</script>

追記:

ひとまず下記で動くことを確認しました。

HTML

1<link rel="stylesheet" href="src/css/swipebox.css"> 2<script>var arr = [];</script> 3<ul class="columns"> 4 <li class="a-post"> 5 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/300">001</a> 6 <script>arr.push( '#ffa' );</script><!-- li要素の外に置かない --> 7 </li> 8 <li class="a-post"> 9 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/400">002</a> 10 <script>arr.push( '#faf' );</script><!-- li要素の外に置かない --> 11 </li> 12 <li class="a-post"> 13 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/500">003</a> 14 <script>arr.push( '#aff' );</script><!-- li要素の外に置かない --> 15 </li> 16 <li class="a-post"> 17 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/600">004</a> 18 <script>arr.push( '#00a' );</script><!-- li要素の外に置かない --> 19 </li> 20 <li class="a-post"> 21 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/700">005</a> 22 <script>arr.push( '#0a0' );</script><!-- li要素の外に置かない --> 23 </li> 24 <li class="a-post"> 25 <img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/800">006</a> 26 <script>arr.push( '#a00' );</script><!-- li要素の外に置かない --> 27 </li> 28</ul> 29<script src="lib/jquery-2.1.0.min.js"></script> 30<script src="src/js/jquery.swipebox.js"></script> 31<script> 32;( function( $ ) { 33 var func = function( index ) { 34 $( '#swipebox-overlay' ).css( 'background-color', arr[ index ] ); 35 }; 36 $( '.swipebox' ).swipebox( { 37 afterOpen: func 38 , nextSlide: func 39 , prevSlide: func 40 } ); 41 42} )( jQuery ); 43</script>

投稿2016/05/10 05:31

編集2016/05/14 10:13
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tats.N

2016/05/14 06:54 編集

回答ありがとうございます。あまりJSを書いたことがないのでわからないのですが、こんな感じであってますか?現在まだ動いてはいないですがもし間違いがあれば教えていただきたいです。 <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <script type="text/javascript"> ;( function( $ ) { $( '.swipebox' ).swipebox(); } )( jQuery ); </script> <ul class="columns"> <script>var arr = [];</script> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php $artimage = get_field("artwork-image");?> <?php $bgcolor = get_field("bg-color");?> <li class="a-post"> <img src="<?php echo $artimage['url']?>"> <a rel="gallery" class="swipebox" href="<?php echo $artimage['url']?>"><?php the_title();?></a> </li> <script>arr.push( '<?php echo $bgcolor?>' );</script> <?php endwhile; endif; ?> </ul> </main><!-- .site-main --> </div><!-- .content-area --> 別ファイルのフッターに教えていただいた下のコードは書いてあります。 <script> ;( function( $ ) { var func = function( index ) { $( '#swipebox-overlay' ).css( 'background-color', arr[ index ] ); }; $( '.swipebox' ).swipebox( { nextSlide: func prevSlide: func } ); } )( jQuery ); </script> いろいろ質問してしまって申し訳ないのですが、arr.push()で配列に入れるのはなぜですか?プログラミング全般的に初心者なので理解しておきたいのでよければ教えていただきたいです。
kei344

2016/05/14 08:40

> 現在まだ動いてはいないですが $( '.swipebox' ).swipeboxを2回記述されているようですが、最初のものは不要です。1ページに1回で、その際に関数を渡す必要があります。 > arr.push()で配列に入れるのはなぜですか? PHPで配列にして、それを js の配列に渡せる形に変形する方法も有るのですが、これでも可能だからという感じです。 たとえば、 <script>var arr = [];</script> <script>arr.push( '#ffa' );</script> <script>arr.push( '#ffb' );</script> <script>arr.push( '#fff' );</script> と書いてもarr がグローバル(window)のスコープ内に居るので動くと思います。 動かないとの事ですが、上で書いた「2回記述」の是正を行ったうえで下記を確認してください。 1. エラーは発生していますか? 2. arr.push( '#ffa' );は問題なく出力されていますか?(ブラウザ上でソースを表示して確認する)
kei344

2016/05/14 10:14

ミスがあったため、修正しました。すみません。 また、一部挙動も見直していますので、追記部分を御覧ください。
guest

0

こんんちは。

SwipeBox.jsを使ったことがないですが。
要はoverlay表示する際に背景色を個々のimageに合わせて「赤、青、黄」とかで敷きたいってことですよね?

jqueryとかjavascript使わないと難しいかと思います。

例えばli,a自体にdata-○○="色コード"与えといて
クリックされたタイミングでdata-○○="色コード"取得してうわがくとか?

でもpre nextの場合はまた別の制御もしないとだめです。
(1っ発目で前後のdata-○○="色コード"も取得してpre nextに突っ込んどくとかそしてクリックされるたびに突っ込みなおしていくとか。。。。)

もしかしたらSwipeBox.js側にオプションとしてなんか使いやすいものあるかもしれませんがそこはなんとも。。。使ったことないのでごめんなさい。

回答になっていれば幸いです。

投稿2016/05/10 05:15

kogure

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tats.N

2016/05/14 06:56

回答ありがとうございます。その通りです。投稿する際に、投稿する画像に合うように色を選べるようにしたいのです。質問なのですが、pre nextというのはなんですか??
kogure

2016/05/16 01:13

overlayで表示した際に前後にも進めるように作るのかなと思います。 「<」「>」とかクリックすると一覧の前後をoverlayしたまま表示できるみたいな。 kei344さんの --- nextSlide: func prevSlide: func --- この辺とかぶってくる部分ですね。 たぶん、kei344さんの内容で解決するかと思いますのでがんばってください!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問