スライドのアイコンの上に閉じるボタンが出てしまう。

質問

jqueryをつかって、スライドを作ってみたのですが、小さなナビアイコンの上に
閉じるボタンらしきものが表示されてしまいます。
これを消す方法がありましたら教えてくださいTT　
あまり詳しくないので解りやすくおねがいします。。。
http://www.rakuten.ne.jp/gold/maty55/maty_koushin/slide/slide_index.html

回答No.2

LancerVII · ベストアンサー

こんにちは。

jquery.imageNavigation.jsは修正する必要がありません。
ロールオーバ用の画像は同じディレクトリに保存すればOKです。
例えば一番左上の02-1-1mine.jpgと同じディレクトリに02-1-1mine_on.jpgという画像をおけば動作するはずです。
それでも読み込まれない場合はキャッシュの問題等ある可能性もありますのでctrl+F5で更新してみたり、キャッシュのクリアをしてみてください。

もともとの呼び方で呼べばロールオーバーをする設定で動作します。

$().ready ( function() {
$(function(){
$("#image-navigation").imageNavigation({
time:2000,
animationTime:0,
rolloverTime: 0,
rolloutTime: 1000
});
});
});

お礼

ありがとうございました！！！
画像を置いたらちゃんと出てきました(ノ´▽`)ノ♪
ほんと助かりました～(≧▽≦)人(≧▽≦)ノヤッター

回答No.1

LancerVII

こんにちは。

確認してみました。
閉じるボタンではなくて、画像が読み込めない時に表示されるものです。

原因はロールオーバー時の画像が無いためです。
マウスカーソルがONまたはスライドショー中の選択状態(左の大きい画像が表示される時)にxxx_on.xxxの画像に置き換わるように作られています。

しかし、このプラグインはきちんと考えられており、オプションの設定でロールオーバー画像を使用しないように出来ます。
ロールオーバー画像を使用しない場合は、

rolloverImage: false

をオプションに追加してください。
以下のようになります。

$("#image-navigation").imageNavigation({
time:2000,
animationTime:0,
rolloverTime: 0,
rolloutTime: 1000,
rolloverImage: false
});

xxx_on.xxxを準備すれば今のままでも×印が出ることはありません。
(ちょっと光った感じの画像を用意するとか)

お礼

こんにちは。
回答ありがとうございます！！
画像が読み込めない時に表示されるものだったのですね。。。

その、ロールオーバー時の画像をそれぞれ用意しました。
使用をしたいのですが、どこをどうしていいかもわかりません。。

>原因はロールオーバー時の画像が無いためです。
>マウスカーソルがONまたはスライドショー中の選択状態(左の大きい画像が表示される時)に>xxx_on.xxxの画像に置き換わるように作られています。
>xxx_on.xxxを準備すれば今のままでも×印が出ることはありません。
>(ちょっと光った感じの画像を用意するとか)

下記に、貼り付けてみます。もしよろしかったら説いていただきたいです。

(function($) {

function imageNavigationSlide(option) {
var $active = $('.navi-image a.active', option.elem);
if ( $active.length == 0 ) $active = $('.navi-image a:last', option.elem);
var $next = $active.next().length ? $active.next() : $('.navi-image a:first' ,option.elem);
$active.addClass('last-active');
var $active_navi = $(".navi ."+ $active.attr("rel") +"", option.elem);
var $next_navi = $(".navi ."+ $next.attr("rel") +"", option.elem);
//rolloverImage_out($active_navi,option);
//rolloverImage_on($next_navi,option);
$active_navi.removeClass("active");
$next_navi.addClass("active");
rolloverImage_chenge(option);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, option.animationTime, function() {
$active.removeClass("active last-active");
});
}
function startInterval(option){
if(option.autoPlay) imageNavigationID = setInterval(function(){ imageNavigationSlide(option) }, option.time );
}
function rolloverImage_on(obj, option){
if (!option.rolloverImage) return;
$("img.over", obj).stop().fadeTo(option.rolloverTime,1);
}
function rolloverImage_out(obj, option){
if (!option.rolloverImage) return;
$(".over", obj).fadeTo(option.rolloutTime,0);
}
function rolloverImage_chenge(option){
$(".navi a.active img.over", option.elem).stop().fadeTo(option.rolloverTime,1);
$(".navi a:not(.active) img.over", option.elem).stop().fadeTo(option.rolloutTime,0);
}

続きます。。。

補足

$.fn.imageNavigation = function(option) {
//init
option = $.extend({
elem:this,
time: 2000,
animationTime: 500,
autoPlay: true,
rolloverImage: true,
rolloverTime: 10,
rolloutTime: 800
}, option);
var $active = $('.navi-image a.active', option.elem);
if ( $active.length == 0 ) {
$active = $('.navi-image a:first', option.elem);
$active.addClass("active");
$(".navi a:first", option.elem).addClass("active");
}

naviCnt = $(".navi a", option.elem).size();
for(i=1;i<=naviCnt;i++) {
$(".navi li:nth-child("+i+") a",option.elem).addClass("navi-"+i).attr("rel","navi-"+i);
$(".navi-image a:nth-child("+i+")",option.elem).addClass("navi-"+i).attr("rel","navi-"+i);
}

$(".navi li a", option.elem).each(function(){
$(this).css("position", "relative");
if(option.rolloverImage) {
overSrc = $("img", this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
$(this).prepend('<img src="'+overSrc+'" class="over" />');
$("img.over" ,this).css("position", "absolute").css({opacity: 0.0});
}
});
$("a.active img.over", this).stop().css({opacity: 1.0});

$(".navi a",option.elem).mouseover(function(){
$active = $('.navi-image a.active', option.elem);
$next = $(".navi-image a."+$(this).attr("rel")+"");
$('.navi a', option.elem).removeClass("active");
$(this).addClass("active");
//rolloverImage_on(this, option);
rolloverImage_chenge(this, option);
if($active.attr("rel") != $next.attr("rel") ) {
$active.addClass('last-active');
$active.removeClass('active');
$next.stop().css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, option.animationTime, function() {
$active.removeClass('active last-active');
});
}
}).mouseout(function(){
rolloverImage_out(this, option);
$activeING = $(".navi-image a.active:animated",option.elem);
if($activeING.length !=0 ) {
$activeING.stop().css({opacity: 1.0});
$(".navi-image a.last-active").each(function(){
$(this).removeClass("last-active");
});
}
});

$(option.elem).mouseover(function(){
if(option.autoPlay) clearInterval(imageNavigationID);
}).mouseout(function(){
startInterval(option);
});
startInterval(option);

if(option.rolloverImage){
$(".navi", option.elem).hover(function(){
},function(){
$("a.active img.over", this).stop().css({opacity: 1.0});
rolloverImage_chenge(option);
});
}
}

})(jQuery);

以上です。m(__)m