対象の画像にクラスを設定して、それぞれの画像の下に DIV を挿入してその DIV の中に画像を移動して、DIV に CSS を設定するという単純な jQuery のコードです。
※ 画像の下に DIV を挿入は insertAfter
※ 挿入しても、DIV を参照中なので、each で同一数の DIV と 画像を対応させて親子関係に変更
※ 最後は CSS を設定
( CSS は、大外の $("<div></div>") に対して設定しても同じ )
▼ 加工あり
▼ 加工なし
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("<div></div>")
.insertAfter(".my_img")
.each(function(index,el){
$(el)
.append( $(".my_img").eq(index) )
.css({
display: "inline-block",
border: "solid 1px #909090",
padding: "15px",
"border-radius": "6px",
"margin": "10px 10px 10px 10px",
"box-shadow": "0px 25px 10px -15px rgba(0, 0, 0, 0.5)"
})
})
});
</script>
<pre>
▼ 加工あり
<img class="my_img" src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img class="my_img" src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img class="my_img" src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">
</pre>
<pre>
▼ 加工なし
<img src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">
</pre>
タグ：jquery
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
