• 締切済み

外部ページからスライダー内の各画像の表示領域へ直接

外部ページからスライダー内の各画像の表示領域へ直接アクセスできるようにしていです。 1. ボタンをクリックするとポップアップが開く 2. 開いたポップアップ内にスライダーが設置されていて、NEXT/PREV などで移動できる。 3. もとのページのボタンごとに、ポップアップ内のスライダーの各画像とがリンクしている。 具体的には下記のサイトのような感じです。 http://www.proud-web.jp/inagekaigan/c/plan/index.html Nivo Slider などのプラグインをしようしてできないかと思いましたが、 ポップアップ内の最初に開くページは指定できても、外部から直接指定することはできませんでした。 IDを指定したりいろいろ調べたのですがうまくいきません。 当方、Javascript がまったくわかっていないのですが、可能でしょうか。 良い方法があったら教えてください。

  • wpwff
  • お礼率50% (3/6)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示のサイトで用いているしくみは、ご想像なさっているより簡単な方法を用いていると思います。 ご提示のサイトの場合、どのタイプをクリックしても基本的にリンク先は同じhtmlです。 例えば、 http://www.proud-web.jp/inagekaigan/c/plan/type.html?type=c80lh ここのページの中には、全てのタイプが含まれていますが、丁度、画像のスライドショーやタブ表示の切替えなどと似たような仕組みで、ボタンをクリックした時に表示するタイプを切替えています。(他のタイプは非表示にしている) それなので、元のページと特別に連動しているわけではありません。 このページを最初に表示する時に、表示される内容はリンクのurlのクエリ部で指定されています。 上記の例で言うとtype=c80lhのところ。 ここのtypeを変えてリンクすることで、最初に表示するタイプを決めているというしくみです。 あとはボタン操作に応じて、次、前といった順で表示/非表示を切替えているだけで、このページ内で完結しています。 詳細は、ソースをご覧ください。 まぁ、他にもいろいろやっているので少しわかりにくいかも知れませんが… jQueryというjavascriptのライブラリが利用されています。 >可能でしょうか。 やりたいことがそのようなことであれば、可能です。 ちがうことであるなら、多分可能ではないかと想像しますが、どのようにしたいかにもよるでしょう。

関連するQ&A

  • スライダー領域の変形方法

    お世話になります。 Wordpressで作成しているブログに、コンテンツスライダーを設置しようと考えています。 スライダー自体はjqueryかプラグインで実装しようと思うのですが、 スライダー領域を単なる長方形ではなく、添付画像のように変形させたく思っています。 スライダーの画像表示領域は、ピンクに塗ってある部分です。 こちら、どのような実装方法があるのでしょうか。 お手数をお掛けしますが、是非お力をおかしください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 外部スクリプトファイルで表示した画像のサイズ変更

    時間ごとに違う画像を表示するスクリプトを外部ファイルとして設置し、複数のページで読み込みます。 <script language="javascript" src="○.js"></script> ただ、ページ毎で画像のサイズを変更したいのです。 ページAでは120×120で表示、ページBでは200×200で表示といった形です。 ページ毎のhtmlタグでの指定でできますでしょうか?

  • jQuery slider2のページアイコン

    小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのjQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン(class="jquery-slider-page"として作成されている部分?)が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js(http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用) また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。

  • 自動で画像を表示させるには?

    ビルダー6でHPを作成しています。トップページに訪問者が来た時に トップページとは別に画面の右上か左上に 別ウィンドウで画像を 自動的に表示(400×300くらいで)させたいのです。ポップアップを ボタンにリンクを貼って開く事は何とかできたのですが 自動(強制) でウィンドウサイズまで指定(画像の大きさに合わせて)表示させる 方法が分かりません。どなたか教えていただけませんか?よろしく お願いします。

  • 外部画像を読み込んでページをめくるように表示したい

    ページをめくるように写真を表示したくて、こちらの過去ログから下記のサイトに辿り着きました。 http://www.actionscripts.org/showMovie.php?id=459 ページごとにたくさんの画像を使うことと、頻繁に画像を入れ替えたい理由で、外部ファイルを読み込んで使えるように改造しようとしてみましたが、どこをいじればよいのか見当もつきません。 Bound Pages (MC)のcreateEmptyMovieClipの中のattachMovie辺りを書き換えればよいのかと思ったのですが、うまくいきません。 function setStationary() { // Place the "S"tationary "L"eft "P"age createEmptyMovieClip("SLPage", 1); if (flipPage!=1.5) { makePage (SLPage, -1) SLPage.attachMovie("print"+(flipPage-1.5), "Print", 1); with (SLPage.Print) { _x = -pageWi/2; _y = -pivotY; } } やりたいことをまとめますと、 1.雑誌のカテゴリーボタンを配置 2.クリックされたカテゴリーのフォルダからjpgを読み込み 3.jpgファイルの枚数分MCを作成 となります。 ボタンでそれぞれの雑誌に切り替えるようなイメージにしたいのです。 どなたか分かりやすく教えていただけませんか?

  • 特定のページが表示されません

    インターネットでいくつかのページが開かなくなりました。 特定のページだけなのですが、どれもサイトの中のボタンをクリックして開くもので、 ポップアップ画面を開くと「ページを表示できません」となってしまいます。 他のPC(XP)で見るとちゃんと開きます。 キャッシュクリアをしても変わりませんでした。 ポップアップブロックはしていません。

  • 画像の拡大・縮小機能のサンプルページを探しています

    参考:http://www.maimu.co.jp/753/detail/7302106.php 上記サイトのような画像を拡大・縮小出来るスライダーがついていて、 且つ拡大した際にマウスで移動できる機能を実装したいと思っているのですが、 何か解説ページなどありませんでしょうか? Flashでは無く、javascriptで実装できればと思っております。 ポイントとしては、 ◎「+」「-」ボタンだけではなく、スライダーで拡大・縮小ができる ◎拡大時にはマウスで拡大位置を移動できる ◎Flashではなく、javascript(jQueryとか?)で。 ご存知の方がいらっしゃいましたらお願いいたします。

  • jqueryのスライドについて

    お分かりになる方、お知恵をお貸しください。 現在下記URLを参考にポップアップウィンドウを作成しています。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14106485334 これに以下の条件を組み込みたいと思い悪戦苦闘しています。 [1] ---------- 画像を表示した際の「next」と「prev」。 一番最初の画像には「prev」を表示させない。 一番最後の画像には「next」を表示させない。 ---------- 上記だと難しいかなと思いループでもと考えています。 [2] ---------- 最初の画像(prev)→最後の画像へ 最後の画像(next)→最初の画像へ ---------- どちらかお分かりになる方がいましたらお知恵をお貸しください。 よろしくお願いします。

  • Wordpressサムネイル付スライダープラグイン

    Wordpressでサムネイル付のスライダーを簡単・シンプルに設置できる無料プラグインがありましたら教えて下さい。 このたび、知人からの依頼で知人の会社のサイトをリニューアルすることになりました。 以前まで利用していたものはこちらだったのですが Photospace http://isowanted.blogspot.jp/2013/03/wordpressphotospace.html あたらしいテーマではこれは動かないようで、このプラグインにかわるモノを探しています。イメージはこのプラグインのでもそのもので、サムネイルをクリックすると画像がかわるというものです。 Nivo Slider こちらも検討してみたのですが、これは1つのサイトにつき1パターンのスライドショーになりますよね。 知人の会社はコテージを数棟経営していて、各コテージのページにスライダーをつけたいと考えています。 サイトの更新は知人の会社の担当さんがされるので、jQueryを直接触らなければ行けないものだと難しいのかなと思い、プラグインでなにか良い物があればと思っています。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト@…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか? 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします!!

専門家に質問してみよう