- 締切済み
jsでグリッドデザインのサムネイルを制御する方法
図1のような、運用時にサムネイル画像の数が増えたり減る仕様でグリッドデザインをコーディングしているのですが、更新の度にhtmlソースを書き直すのは手間なので、どうにか簡単に更新できないか悩んでいます。 ▼仕様 サムネイル画像は画像の番号順に増えたり減ったりする。 ▼問題点 ・サムネイル画像の縦の長さが一定ではない。かつ、並んだ時のマージンは一定。 ↓ ・上記の条件があるので、コーディング時には図2のように、縦にエリアを割って、area1、area2、area3、area4それぞれfloatをかけて並べる必要がある。 縦にエリアを割ってコーディングすると、htmlソース上では画像の順番がバラバラになるので、どうにかして、下記ようにリストのような状態で、図1のようなデザインを実現したいのですが、JavaScriptで出来るものでしょうか？ （※別にリストでなくてもいいのですが） <ul> <li>タイトル<img src="thum01.jpg"></li> <li>タイトル<img src="thum02.jpg"></li> <li>タイトル<img src="thum03.jpg"></li> <li>タイトル<img src="thum04.jpg"></li> ～ </ul> ご教授をお願いしたく、、、。 よろしくお願い致します。
- casuwala
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- サムネイル画像のclass切替がうまく動かない。
すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSのみでのデザインについて
CSSのみでデザインを勉強中です。 その際にわからないことがありましたので、すみませんが、ご教授下さいませ。 ▼HTMLの方の記述 <div id="banner"> <ul> <li><img src="./img/entry.jpg" width="240" height="55" /></li> <li><img src="./img/entry.jpg" width="240" height="55" /></li> </ul> </div> ▼CSSの記述 #banner { float:left; width:240px; margin:0 0 0 17px; display: inline; } #banner ul li { margin-bottom:0px; } 上記の様に記述しています。画像を縦に２つ空白を入れずに並べたいのですが、WIN IE6.0にて、2mm程の空白が空いてしまいます。NN7.1では4mm程空白ができます。operaは意図している通りに表示されます。 何か原因が有るのでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- CSS
- jCarouselLiteループ時の属性値取得
jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。
- ベストアンサー
- JavaScript
- 画像にリンクを張ったら、レイアウトが崩れました。
ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。 まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。 リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。 または、なにかタグが間違っているのでしょうか。 どなたかアドバイスをお願いいたします。
- ベストアンサー
- HTML
- Javaスクリプトで要素の表示・非表示の制御
すみません。大変困っています。どなたかお分かりになられます方がいらっしゃいましたら、どうかご享受いただけませんでしょうか？ javascriptの記述方法についてとなります。 制御したいソースコードは下記の通りです。 <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> <li><img src="../images/no.jpg" width="100" height="50" /></li> </ul> 上記のソースコードの表示・非表示ですが、imgタグの中のファイル名がno.jpgだった場合のみに<li>から</li>をdisplayをnoneとして出力したいです。 javascript適用後のソースコードは下記になるようにしたいのですがご享受いただけませんでしょうか？ <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> </ul> お手数をおかけいたしますが、何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
- Webページ 画像切替する場合のタグ表記について
初めてWebページ作成する者です。 以下のように記述したTOPページの画像(main.jpg)があります(下記は抜粋)。 ソース(1) <div id="contents"> <div id="main_area"> <p id="main"><img src="img/main.jpg" width="580" alt="" /></p> </div> </div> 現在、JavaScriptを使用して、自動的に画像を切替できるよう修正しています。 切替る画像は、main01.jpg、main02.jpg、main03.jpgの３つで、HTML部でリストを 使用する場合、下記のソース(2)をソース(1)に組み込むには、どのようにすれば 良いでしょうか。 ソース(2) <ul id="xxxxx"> <li> <img src="img/main01.jpg" width="580" alt="" /> </li> <li> <img src="img/main02.jpg" width="580" alt="" /> </li> <li> <img src="img/main03.jpg" width="580" alt="" /> </li> </ul> 周りに質問できる人がおらず、困っています。 申し訳ありませんが、よろしくお願い致します。
- ベストアンサー
- HTML
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- liの数によってulの横幅を動的に設定したい
以下のようなhtmlがあったとして、ul.imageの幅をliの数によって動的に設定したいのですが、 jQueryで指定する場合どう書けばいいのかご教授下さい。 liはfloatしているものとします。 ====================================================== <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> ...以下、いくつも.blockが続きます
- ベストアンサー
- JavaScript
- Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- 締切済み
- CSS
