JQueryのプラグインに関して

質問

どなたかご存知の方、どうかご回答をお願い致します。
下記参考URLをご覧下さい。
JQueryのプラグインまたはCSSなどで参考のページを作成したいと思います。
はじめに、表示する画像はフルスクリーン表示、そして左上にある、メニューを配置して
メニューごと画像が切り替わる。
最後に左右→を表示して切り替えできる。
上記の内容に近いもので、JQueryのプラグインまたCSSなどで出来るのでしょうか。
ネットで毎日調べていますが…なかなか見つからずで…こちらにたどりつきました。
お手数ですがどうぞ宜しくお願い致します。
※backgroundは静止画を導入します。

参考URL
https://www.facebook.com/paper

回答No.4

ONEONE · ベストアンサー

場所を変えたい場合、CSSは下記のようにしましょう。
preserveは背景画像とは違うよと区別するためのクラスとしてCSSでは触らずに、他のクラス名を指定しましょう。
また、idやclassは数字から始めてはいけないので、他の名前がいいですね。
(imgタグのborderのrが抜けていました。borderはスタイルシートで定義しましょう。)

<img class="preserve photo1" src="画像URL" width="236" height="236" >
<img class="preserve photo2" src="画像1URL" width="262" height="30" >

.photo1{
position:absolute;
top:20px;
left:20px;
border:none;
}

.photo2{
position:absolute;
top:300px;
left:20px;
border:none;
}

お礼

ONEONEさん、色々とご回答頂き有難う御座います。
お陰さまで教えて頂いた通り無事解決致しました。
この度は何度も本当に有難う御座いました!!
細かい部分まで見て頂き助かりました^^
まだWEBサイトを制作するにあたりわからないことだらけですが…
もっと基本を勉強して頑張って行こうと思います!!
また機会が御座いましたらどうぞ宜しくお願い致します。
この場をお借りしてお礼をさせて頂ければと思います。
有難う御座いました!!
宜しくお願い致します。

回答No.3

ONEONE

下記を回答したあとで見つけました。
img タグに class="preserve"を追加してください。
すでにほかのclassが記述されている場合は
class="hogehoge preserve"のようにスペース区切りで追加してください。

補足

ご回答有難う御座います。
上記の回答どおり、画像の表示が拡大されず表示できました^^
何度も本当に有難う御座います。
CSSで画像を配置する場所を指定しているのですが、
どうも全てが同じ場所に指定されてしまいます　汗
画像それぞれをclass="preserve"　class="1 preserve" class="2 preserve"と名前を
変更して表示しているのですが…

<img class="preserve" src="画像URL" width="236" height="236" borde="0">
<img class="1 preserve" src="画像1URL" width="262" height="30" borde="0">

img.preserve{
position:absolute;
top: 150px;
left: 130px;
}
img.1 preserve{
position:absolute;
top: 200px;
left: 130px;
}

大変お手数をお掛け致しております。ようやくカタチになりそうです（汗）有難う御座います!!

回答No.2

ONEONE

なるほど、どうやらimgタグはすべて拡大されてしまうようですね。
もしかしたら、指定できるオプションがあるのかもしれませんが。

一つの方法として、ほかの画像を表示する場合は要素の背景として挿入してはいかがでしょう。
たとえば

<img src="img/photo.jpg">

としていたところを

<p style="width:100px; height:30px; background-image:url(img/photo.jpg) no-repeat; background-size:contain; "></p>

のようにすることで画像を挿入できます。

補足

ONEONEさん、度々すみません有難う御座います。
ご説明頂いた通り、<p style="width:236px; height:236px; background-image:url(img/toplogo.png) no-repeat; background-size:contain;"></p>
<img src="img/toplogo.png">を表示していた場所に置き換えてみましたが…画像が表示されずでした。
236pxで指定したのでその分本来ロゴの下にサイトの説明文を記入していたのですが、説明文がずれました。
お忙しい中お手数をお掛け致して申し訳御座いません。

回答No.1

ONEONE

こんなんでしょうか。。
http://nicinabox.com/superslides/#1

補足

ONEONEさん
ご回答有難う御座います。
早速プラグインを入れ動作を試してみました!!
近い物は出来上がってきたのですが…
各ページごとにロゴ画像を挿入すると、背景の全画面表示したように
大きくなってしまいます（汗）
これは表示の大きさを指定できるのでしょうか。
各ページごとレイアウトが異なりますのでやっかいなことに…
初心者で申し訳ないです（涙）
宜しくお願い致します。