jqueryのスライドについて

質問

お分かりになる方、お知恵をお貸しください。
現在下記URLを参考にポップアップウィンドウを作成しています。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14106485334

これに以下の条件を組み込みたいと思い悪戦苦闘しています。

[1]
----------
画像を表示した際の「next」と「prev」。
一番最初の画像には「prev」を表示させない。
一番最後の画像には「next」を表示させない。
----------

上記だと難しいかなと思いループでもと考えています。

[2]
----------
最初の画像(prev)→最後の画像へ
最後の画像(next)→最初の画像へ
----------

どちらかお分かりになる方がいましたらお知恵をお貸しください。
よろしくお願いします。

回答No.4

LancerVII · ベストアンサー

こんにちは。

補足ありがとうございました。
ざっとしか見れていないのでもっと効率的な書き方とか詰めていけばありそうですがとりあえず以下の動きを実装しました。
・画像が1枚の時は閉じるのみ
・前に画像が無ければ「前」を表示しない
・次の画像が無ければ「次」を表示しない
完全にテストしたわけじゃないのでバグがあったらすみません。

全部ソースが載らないのでリンク先のソースを参考にしてみてください。

http://hppg.moe.hm/okwave/qa/q8086360/

変更点、追加点にはコメントを入れてあります。

HTMLは便宜上以下のようにしました。
id="images"で囲んでいます。

<div id="images">
<p class="img1"><a href="images/1.jpg" class="modal"><img src="images/1.jpg"></a></p>
<p class="img2"><a href="images/2.jpg" class="modal"><img src="images/2.jpg"></a></p>
<p class="img3"><a href="images/3.jpg" class="modal"><img src="images/3.jpg"></a></p>
</div>

補足

お忙しい中、本当にありがとうございます。
思い描いた通りにできました。
これを参考に勉強したいと思います。
本当にありがとうございました。
感謝しています。

回答No.3

LancerVII

こんにちは。

あ、すみません。linkにhtmlがどうのこうのは忘れてください。
＊移植時に勝手に解釈して.htmlを入れてしまいました。
hrefにも画像のパスが入るということで良いでしょうか。

あとそのまま実行するとエラーが出ていますね。
これ動いているソースでしょうか。

$(document).on('click', '.modal-move', #next, #prev' function(){

正しくは
$(document).on('click', '.modal-move', '#next, #prev', function(){

出来れば「次」と「前」の追加前で動いているソースがあると良いのですが。

それかやりたいことを具体的に述べてください。

補足

お早い回答ありがとうございます。

申し訳ないです。
ご指摘の通り間違っていました。
$(document).on('click', '.modal-move, #next, #prev', function(){

jqueryのソースは記述しましたソースで全部です。

【やりたい事】
記述しましたjqueryだと正常に動作するのですが

一番最初の画像に『prev(前)』が表示され
一番最後の画像に『next(次)』が表示されます。

"クリック"しても何も動作しないので非表示にしたいと考えています。

若しくは
一番最初の画像の『prev(前)』をクリックすると一番最後の画像へ移動し
一番最後の画像に『next(次)』をクリックすると一番最初の画像へ移動させたいと考えています。

どちらが簡単かも分からず悩んでいます。

--------------------------------------
また、画像1枚の場合も表示されてしまっているので
≪画像1枚の場合は『prev(前)』『next(次)』共に非表示≫
などもできるのでしょうか？
--------------------------------------

「html」
<p class="example0"><a href="画像URL" class="modal"><img src="画像URL(hrefと同一)" /></a></p>
<p class="example1"><a href="画像URL" class="modal"><img src="画像URL(hrefと同一)" /></a></p>
<p class="example2"><a href="画像URL" class="modal"><img src="画像URL(hrefと同一)" /></a></p>

※altなどは省いてあります。

cssは以下の通りです。
#nextや#prevなどのcssは設定していないです。

#modal-win {
width: 100%;
position: absolute;
}
#modal-win-inner {
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
margin: 0 auto;
position: relative;
z-index: 101;
}
#modal-bg {
width: 100%;
height: 100%;
background-color: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 100;
cursor: pointer;
}

よろしくお願いします。

回答No.2

LancerVII

こんにちは。

CSSはどうなっていますか？
ちょっと解析してみてますが、何がやりたいかちょっと見えなくなってしまいました。

まず<img src="' + link + '">の部分のlinkですがxxx.htmlが入ってくるはずです。
画像のパスのはずですがhtmlで良いのですか？

画像をクリックしたらその画像が表示されるイメージなのでしょうか。

回答No.1

LancerVII

こんにちは。

リンク先を見てきましたが実際はどのようにコーディングしていますか？
それがわかればお手伝いできるかもしれません。

補足

回答ありがとうございます。
jqueryは初心者の為、何処にどの様に何を付け加えるか分からずreturn false;をtrueに変更してみたりしたのですが
見当違いだと思っています。
条件式でと思ったのですが全く書き方が分かりません。

下記コードの何処に何を書いたら良いのでしょうか？
お手数ですがよろしくお願いします。

「html」
<p class="img1"><a href="編集不可" class="modal"><img src="sample1.jpg"></a></p>
<p class="img2"><a href="編集不可" class="modal"><img src="sample2.jpg"></a></p>

「jquery」
(function($){
$(function(){
simpleModalWindow();
});

function simpleModalWindow(){
var sp = 500;
var win = $(window);
var body = $('body');
var bg = $('<div id="modal-bg"></div>');
bg.css('opacity', '0');

$(document).on('click', '.modal', function(){
var py = win.scrollTop();
var wh = win.height();
var self = $(this);
var link = self.attr('href');
var check = link.match(/^#.+/);
var mWin = $('<div id="modal-win"><div id="modal-win-inner"><div id="win-nav"><p id="next">次</p><p id="prev">前</p><p id="close">閉</p></div></div></div>');
var mInner = mWin.find('#modal-win-inner');
mInner.attr('class', self.parent().attr('class'));
mInner.css('opacity', '0');
body.append(mWin);
mWin.prepend(bg);

if(!check){
mInner.append('<img src="' + link + '" alt="" />');
var img = mWin.find('img');
img.on('load', function(){
view(img);
});
}else {
var contents = $(link);
mInner.append(contents);
contents.css({display: 'block', zIndex: '101'});
view(contents);
}

function view(a_elm){
var w = a_elm.outerWidth();
var h = a_elm.outerHeight();
var mt = (wh - h) / 2 + py;
bg.animate({opacity: '.75'}, sp);
mWin.css('top', mt + 'px');
mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
}
return false;
});

$(document).on('click', '.modal-move', #next, #prev' function(){
var py = win.scrollTop();
var wh = win.height();
var self = $(this);
var link = self.attr('href') || '';
var check = link.match(/^#.+/i);
var mWin = $('#modal-win');
var mInner = mWin.find('#modal-win-inner');
if(check){
mInner.animate({opacity: '0'}, sp, function(){
var nowContents = $(this).children().not('#win-nav');
body.append(nowContents);
nowContents.hide();
var contents = $(link);
mInner.append(contents);
contents.css({display: 'block', zIndex: '101'});
var w = contents.outerWidth();
var h = contents.outerHeight();
var mt = (wh - h) / 2 + py;
bg.animate({opacity: '.75'}, sp);
mWin.css('top', mt + 'px');
mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
});
}else{
var p = $('.' + mInner.attr('class')).not(mInner)[self.attr('id')]().children('a').filter(function(){return $(this).attr('class') && $(this).children('img').size() > 0});
if(p.size()) mInner.animate({opacity: '0'}, sp, function(){
var nowContents = $(this).children().not('#win-nav');
nowContents.remove();
var p = $('.' + mInner.attr('class')).not(mInner)[self.attr('id')]();
link = p.find('img').attr('src');
mInner.attr('class', p.attr('class'));
mInner.append('<img src="' + link + '" alt="" />');
var img = mWin.find('img');
img.on('load', function(){
var w = img.outerWidth();
var h = img.outerHeight();
var mt = (wh - h) / 2 + py;
bg.animate({opacity: '.75'}, sp);
mWin.css('top', mt + 'px');
mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
});
});
}
return false;
});

$(document).on('click', '#modal-bg, .modal-close, #close', function(){
var mWin = $('#modal-win');
var mInner = mWin.find('#modal-win-inner');
var contents = mInner.children().not('#win-nav');
mInner.animate({opacity: '0'}, sp, function(){
if(!contents.filter('img').size()){
body.append(contents);
contents.hide();
}
mWin.remove();
});
bg.animate({opacity: '0'}, sp);
return false;
});
}
})(jQuery);