• ベストアンサー

jQuery faux-3D Viewportコンテンツ内でもスライド

jQuery faux-3D Viewportコンテンツ内でもスライドさせたい jQuery faux-3D Viewport http://www.skuare.net/test/jfaux3D.html のカスタマイズで質問です。 1～9ボタンの操作に加え、 <div class="slide-wrap"></div> の中にリンクを張ってページスライドさせたいのですが、 JSの記述方法が分かりません。 そもそも実現できるのかどうかもわからないのですが、 ご教授いただけないでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

別に問題ないと思います。 要はboxNにスライド先の要素配列番号をセットして function shiftBoxes(boxN){}をCALLするだけです。 （サンプルが短いので全部貼れそう） ※全角空白は半角空白にしてね！ <style type="text/css"> #panel {width:1800px; height:1800px; position:absolute;} .slide-wrap {float:left; width:520px; height:320px; margin:10px; border:30px solid #DDD;} #enclosure {width:600px; height:400px;overflow:hidden; position:relative;} </style> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function() { 　var shiftSpeed = 1500; //スライドスピード 　var SlideWidth = 600; //スライドの大きさ 　var SlideHeight = 400; //スライドの幅 　var columnCount = 3; //縦列の数 　var rowCount = 3; //横列の数 　$("ul#nav li a").click( function() { 　 navIndex = $("ul#nav li a").index(this); 　 shiftBoxes( navIndex ); 　}); //ここを追加 　$("#nav2 a").click(function(){ 　 shiftBoxes(Number(this.hash.replace('#',''))-1); 　}); //ここまで 　function shiftBoxes(boxN) { 　 var col = ( (boxN) % rowCount ) * -1; 　 var row = Math.floor( (boxN) / columnCount ) * -1; 　 $("#panel").stop().animate({ 　　 left: SlideWidth * col, 　　 top: SlideHeight * row }, 　　 shiftSpeed, "easeInOutCubic"); 　} }); </script> </head> <body> <p> <h3>斜めにスクロール</h3> <div id="enclosure"> 　<div id="panel"> 　 <div class="slide-wrap">1<div id="nav2"><a href="#9">9へ飛ぶ</a></div></div> 　 <div class="slide-wrap">2</div> 　 <div class="slide-wrap">3</div> 　 <div class="slide-wrap">4</div> 　 <div class="slide-wrap">5</div> 　 <div class="slide-wrap">6</div> 　 <div class="slide-wrap">7</div> 　 <div class="slide-wrap">8</div> 　 <div class="slide-wrap">9</div> 　</div> </div> <ul id="nav"> 　<li><a href="#1">1</a></li> 　<li><a href="#2">2</a></li> 　<li><a href="#3">3</a></li> 　<li><a href="#4">4</a></li> 　<li><a href="#5">5</a></li> 　<li><a href="#6">6</a></li> 　<li><a href="#7">7</a></li> 　<li><a href="#8">8</a></li> 　<li><a href="#9">9</a></li> </ul> </p> </body> </html>

pzq11111
質問者

お礼

早急なご回答ありがとうございました。 早速、試してみたところ、無事稼動しました。 ソースまで記述していただいて恐縮です。 ほんとにありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

おっと、id重複はおこられるから、 <div class="slide-wrap">1<div class="nav2"><a href="#9">9へ飛ぶ</a></div></div> にして $(".nav2 a").click(function(){ shiftBoxes(Number(this.hash.replace('#',''))-1); }); の方がよいかも．．

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

斜めに見ただけですが… shiftBoxes（）に表示したいboxのindex番号を与えてあげれば良いみたいですね。 　onclick ="shiftBoxes(8);" みたいなことで可能そうですが、shiftBoxが関数の中にあるので（↑）のままではアクセスできないはず。 手っ取り早く行なうなら、(↑)のonclickの設定を（navに設定しているのと同じように）関数の中で設定してあげればよいのでは？ 　$( selector ).click( function() { shiftBoxes(番号); }); みたいな感じ。 （未検証です）

pzq11111
質問者

お礼

早急なご回答に感謝いたします。 無事、稼動することができました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Jqueryスライドが動きません。教えてください

    WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします

  • jQuery開閉式のメニュー実装について

    jQueryにて開閉式のメニューを、下記jsを使用し実装したいと思ってるのですが、 下記jsだと、右側から表示するようになっています。 これを左側から表示するようには、js及びcssをどう修正すれば、 実現できるようになりますでしょうか？ あと、デフォルトで「開いた」状態にする場合もどう修正すればよろしいでしょうか。 ■javascript <script type="text/javascript"> $(document).ready(function(){ var panel_DefW = $("#slide_panel").width(); var btn_DefW = 20; $('#slide_panel').width(btn_DefW); $('.menu_off').click(function() { if($("#slide_panel").width() > btn_DefW){ w = btn_DefW; }else{ w = panel_DefW; } $("#slide_panel").animate({ width: w }, "slow", function(){ $('.menu_off').toggleClass('active'); }); }); }); </script> ■html <div id="slide_panel"> <div class="wrap menu_off"> <div class="panel_main"> <h2>メニュー</h2> <ul> <li><a href="#">リストメニュー1</a></li> <li><a href="#">リストメニュー2</a></li> </ul> </div> </div> </div> ■css #slide_panel{ position: absolute; top:200px; right:0; margin: 0; padding: 0 0 0 0; width:220px; height: auto; cursor: pointer; overflow: hidden; } #slide_panel .wrap{ width: 220px; overflow:hidden; 以上になります。 誰かお分かりになる方がいらしましたらお願い致します。

  • Jqueryスライダーが動きません。

    WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか？ （ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。

  • スライドショーについて

    ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。

  • jqueryとjavascriptの競合？

    どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> 　<div class="header"></div> 　<div class="main">**フロートで左に配置 　　<iframe></iframe> 　</div> 　　//１． 　　//jqueryの「iframe-auto-height」プラグインを使って、 　　//読み込まれた内容に応じてiframeの高さを変えるようにしたい。 　<div class="menu">**フロートで右に配置</div> 　　//２． 　　//jqueryの「portamento」プラグインを使って、 　　//画面が縦長になりスクロールしてもこの「メニュー」が 　　//画面に追従してフロートするように（常に画面上に現れている様に）したい。 　　//３． 　　//このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■　「１．」「２．」のjqueryは、同時にちゃんと動作しました。 　　が、「３．」を加えると「１．」が動きません。 　　「２．」は常に正常に動作します。 　　「１．」と「３．」が競合しているようなのですが、 　　私はみなさんが提供してくださっているスクリプトを“切り貼り”して 　　使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 　　希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 　★「３．フロートするメニューボックスの中のリンクから、 　　　表示する内容に応じて高さが可変するiframeの内容を切り替える」 　　　にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> ///　１．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> 　///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> 　///　『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 　///　フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 　///　は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> 　///　『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> 　///　『フロートボックス』用読み込み＆スクリプト 　　　　 </body> 内容は以上となります。 何卒よろしくお願いいたします。

  • jQueryスライドプラグイン

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • jqueryプラグインの設置方法

    すみません、超初心者です。 コチラのサイト（http://laquu.com/plugin/innerslide/demo）の「インナースライド」プラグインを導入したいのですが、カーソルを載せてもピクリとも反応しません。 自分で書いたソースはこんな感じです.↓ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.laquu.custom-65049.js"></script> <script> jQuery(function(){ laquu("#innerslide1").innerSlide(); }); </script> <body> <div class="innerslide-panel"> <div id="innerslide1"> <p>カーソル載せる</p> <div class="laquu-innerslide"> スライドする内容 <!-- End laquu innerslide --></div> <!-- End innerslide1 --></div> <!-- End innerslide panel --></div> </body> ちなみに今はサーバーにはアップロードしておらず、完全にローカルでプレビューしています。 もしかして.jsファイルをサーバーにアップロードしなくては動かないのでしょうか？？？ 無知で申し訳ありません、ご回答宜しくお願い致します。

  • jQueryでappleっぽい画像ギャラリー設置したいです

    http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。

  • 画像スライドショー用のjQueryを埋め込みたい

    画像スライドショー用のjQueryを埋め込みがしたいです。 埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？ またデレクトリーはどこにいれればいいのでしょうか？？ 基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。

  • jqueryのスライドするナビゲーションについて

    現在、以下のjqueryを使用して横スクロールサイトを作成しているのですが、 （Smooth Vertical or Horizontal Page Scrolling with jQuery） http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ ナビゲーションに別のjQuery MagicLine Navigationというjqueryのスライドするメニューを配置しています。 デモ http://css-tricks.com/examples/MagicLine/ このスライドするラインを表示中のコンテンツに合わせてストップさせたいのですが、 横スクロールサイトでコンテンツが一つのhtmlファイルのため 止めることができません。 これを止める方法があれば実現させたいのですが、 どなたかお分かりの方がおられましたらご教授頂けませんでしょうか。 ＜javascript＞ $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); <html> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Buy Tickets</a></li> <li><a href="#">Group Sales</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">The Show</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Magic Shop</a></li> </ul> </div> どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する