jQuerryのspotlightとpiroboxの組み合わせについて
- 現在、jQuerryのspotlightを利用して、ヘアスタイルの一覧を作成しました。spotlightは、サムネイルの効果ですが、これを利用しつつ、piroboxというjQuerryをつかい、サムネイルをクリックして展開する効果を利用したいと思っています。
- しかし、spotlightはうまくいくのですがpiroboxが認識せず、動かない問題が発生しています。HTML/jQuerryの知識が乏しく試行錯誤していますがうまくいきません。piroboxのHPには、class指定したらつかえるようなことを英文でかいているので、クラス指定しても動きません。
- どのようにしたら2つのjQuerryを同じ箇所に組み合わせることができるのか教えてください。
- ベストアンサー
jQuerryの組み合わせについて
WEB製作中に行き詰ってしまいました。 教えて頂くと非常に助かります。 宜しくお願いします 現在、 jQuerryのspotlightを利用して、ヘアスタイルの一覧を作成しました。 (http://tutsvalley.com/demos/spotlight/) spotlightは、サムネイルの効果ですが、これを利用しつつ、 piroboxというjQuerryをつかい、サムネイルをクリックして展開する効果を利用したいと思っております。 （http://www.pirolab.it/pirobox/） しかしながら、 spotlightは当然うまくいくのですがpiroboxが認識せず、動きません HTML/jQuerryの知識が乏しいため、試行錯誤した結果、 最初にspotlightのDIVタグを書き、その下に、piroboxのDIVで指定すればよいのかと思い、書いてみましたが、うまくいきません。 piroboxのHPには、class指定したらつかえるようなことを英文でかいているので、クラス指定して動くと思いました。 結果動きません。 たんに画像が開くだけになってしまいます。 どのようにしたら2つのjQuerryを同じ箇所に組めるのでしょうか？ 教えてください。 宜しくお願いします 私が書いているHTMLは以下の通りです <div class='spotlightWrapper' id="spotlightWrapper"> <ul> <li><ahref="images/hair/1.jpg"class="pirobox_gall"><imgsrc='images/hair/1_R.jpg' /></a></li> <div class='clear'> </div> </ul> </div>
- bejimaito
- お礼率75% (9/12)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Spotlightのデモサンプルを元に試してみました。 私が試した限りでは、特にライブラリーやCSSを変更したりしなくても 素直に二つ組み込んだら、動作しました。 ×<ahref="images/hair/1.jpg"class="pirobox_gall"><imgsrc='images/hair/1_R.jpg' /></a> ○<a href="images/hair/1.jpg" class="pirobox_gall"><img src='images/hair/1_R.jpg' /></a> は単に投稿時のコピペミスですよね。 piroboxの方は、 <a href="images/hair/1.jpg"class="pirobox_gall"><img src='images/hair/1_R.jpg' /></a> で、aタグのhrefに本体画像とpiroboxのクラス指定、imgタグのsrcにサブネール画像をセットして、本体<div class='spotlightWrapper'>画像をポップアップさせる仕組みで、 Spotlightは <div class='spotlightWrapper'> 内にある<ul><li><a><img></a></li>.....</ul> の<img>にある画像にマウスホバーでフォーカスさせる仕組みですね。 競合について詳しくみてませんが、特にいじらなくても出来ました。 （例） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Spotlight AND PiroBox test</title> <style type="text/css"> .spotlightWrapper ul { list-style-type: none; /* remove the default style for list items (the circles) */ margin:0px; /* remove default margin */ padding:0px; /* remove default padding */ } .spotlightWrapper ul li { float:left; /* important: left float */ } .spotlightWrapper ul li a img { width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */ position:relative; /* so we can use top and left positioning */ border:none; /* remove the default blue border */ } .spotlightWrapper ul li a img.active { border:4px solid white; /* choose whatever you like */ z-index:1; /* show it on top of the other images (they have z-index 0) */ left: -4px; /* same as border width but negative */ top: -4px; /* same as border width but negative */ } .clear { clear:both; } /* to clear the float after the last item */ </style> <link href="/jslib/pirobox_1_2/css_pirobox/white/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" /> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/pirobox_1_2/js/piroBox.1_2_min.js"></script> <script type="text/javascript" charset="utf-8"> <!-- $(window).load(function(){ //Spotlihgtの初期化 var spotlight = { // the opacity of the "transparent" images - change it if you like opacity : 0.2, /*the vars bellow are for width and height of the images so we can make the <li> same size */ imgWidth : $('.spotlightWrapper ul li').find('img').width(), imgHeight : $('.spotlightWrapper ul li').find('img').height() }; //set the width and height of the list items same as the images $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight }); //when mouse over the list item... $('.spotlightWrapper ul li').hover(function(){ //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) $(this).find('img').addClass('active').css({ 'opacity' : 1}); //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ; //when mouse leave... }, function(){ //... find the image inside of the list item we just left and remove the active class $(this).find('img').removeClass('active'); }); //when mouse leaves the unordered list... $('.spotlightWrapper ul').bind('mouseleave',function(){ //find the images and change the opacity to 1 (fully visible) $(this).find('img').css('opacity', 1); }); // piroBoxの初期化 $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity radius: 4, //caption rounded corner scrollImage : false, // true == image follows the page _|_ false == image remains in the same open position // in some cases of very large images or long description could be useful. slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox pirobox_prev : 'piro_prev', // Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); // --> </script> <body> <!-- start spotlightWrapper div --> <div class='spotlightWrapper'> <!-- start unordered list --> <ul> <li><a href='/jslib/spotlight/images/1.jpg' class="pirobox_gall" title="title1"> <img src='/jslib/spotlight/images/1.jpg' /> </a></li> <li><a href='/jslib/spotlight/images/2.jpg' class="pirobox_gall" title="title2"> <img src='/jslib/spotlight/images/2.jpg' /> </a></li> <li><a href='/jslib/spotlight/images/3.png' class="pirobox_gall" title="title3"> <img src='/jslib/spotlight/images/3.png' /> </a></li> <li><a href='/jslib/spotlight/images/4.jpg' class="pirobox_gall" title="title4"> <img src='/jslib/spotlight/images/4.jpg' /> </a></li> <li><a href='/jslib/spotlight/images/5.jpg' class="pirobox_gall" title="title5"> <img src='/jslib/spotlight/images/5.jpg' /> </a></li> <li><a href='/jslib/spotlight/images/6.png' class="pirobox_gall" title="title6"> <img src='/jslib/spotlight/images/6.png' /> </a></li> <li><a href='/jslib/spotlight/images/7.jpg' class="pirobox_gall" title="title7"> <img src='/jslib/spotlight/images/7.jpg' /> </a></li> <li><a href='/jslib/spotlight/images/9.jpg' class="pirobox_gall" title="title9"> <img src='/jslib/spotlight/images/9.PNG' /> </a></li> <li><a href='/jslib/spotlight/images/10.jpg' class="pirobox_gall" title="title10"> <img src='/jslib/spotlight/images/10.jpg' /> </a></li> <div class='clear'></div> </ul> <!-- end unordered list --> </div> <!-- end spolightWrapper div --> </body> </html>
関連するQ&A
- img画像表示を短くしたい
lemmon-slider-0.2 win8.1 pro 下記 img 45個 記述しています。表示が長いので、短くしたい。500個の場合もあります。 ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細 IE11 F12開発者ツール 参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>
- 締切済み
- JavaScript
- 真中にならない
HTML <div align="center"> <ul class="u"> <li><a href="index.html"><img onmouseover="this.src='images/home2.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" alt="" border="0" /></a></li> <li>・・・・・ </li> </ul> </div> CSS ul.u { list-style:none; margin: 0px; padding: 0px; } ul.u li{ float: left; list-style:none; display:inline; margin: 0; } これで中央に来ないのですがどうしてでしょうか？ ulではなくtableですと真中にちゃんときます。
- ベストアンサー
- HTML
- サムネイル画像の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
- 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
- ie6 でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。 疑ったもの ・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ widthの指定 ・cssが効いていない ・ ネガティブマージン など ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- 順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
- インラインフレーム内skitter画像ターゲット
jQueryを使ったスライドショーでskitterを利用しています。 skitterで作ったページをインラインフレームでトップページに表示しているのですが、画像をクリックしてターゲットのページを開く際、時々インラインフレーム内にターゲットのページが開いてしまうことがあります。特に画像アニメーションが完了していない状態でクリックするとインラインフレームの中に開いてしまうように思えます。 以下のように画像のコード部分でリンクの前にtarget指定で_topは指定してあるのですが・・。 <div class="box_skitter box_skitter_large"> <ul> <li><a target="_top" href="リンク/newpage1.html" > <img src="images/img01.jpg" /></a> <div class="label_text"><p>画像１</p></div> </li> <li><a target="_top" リンク/newpage2.html" > <img src="images/img02.jpg" /></a> <div class="label_text"><p>画像２</p></div> </li> </ul> </div> jquery.skitter.jsのほうで何かコードを変えないといけないのでしょうか？ それともインラインフレーム内でskitterの表示はよくないのでしょうか？ targetで_topを指定してあればうまく開くように思うのですが・・。 jQueryは初心者です。 ご存知の方、ぜひ対処方法をご教授ください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
お礼
ありがとうございました！ 試しに作業までして頂いて、おかげさまで無事に出来ました。 おっしゃるとおり、WEB構築の知識がある方であれば、なにも苦も無く 出来るようでした。 私は単に、 <div class='spotlightWrapper'>の配置ミスだったようです。 本当にありがとうございました。