ContentSlideがIEで動かない現象

web-sakura
(@web-sakura)

11年前

現在、「Content Slide Plugin　Ver1.42」　を使用していますが
IE特有の不具合を解消できずご相談させて頂きます。

IE以外のプラウザでは、全くエラーも出ずに動いているのですが
IE7、IE8で確認すると、全く動いてくれません・・・

自分なりに、「互換モードのＯＮ、ＯＦＦ」や「ＪＳファイルのオプションの最後に余計な,はないか」など、ネットで調べられる限りの情報で試してはみましたが解決できませんでした。

htmlやcssの知識はありますが、wordpressをいじるのは今回が初めてで
ｊｓも初心者ですので困り果てております。

是非、皆様のお力をお貸し下さい。

実際のサイトURLは、　http://www.town.atsuma.lg.jp/　です。

宜しくお願い致します。

5件の返信を表示中 - 1 - 5件目 (全5件中)

ihironaka55
(@ihironaka55)

11年前

多分、特定のブラウザでのみ発生するという場合、ブラウザ側のJavascriptの処理速度の問題とPCのパフォーマンスの問題ではないかと思います。

隣のPCで見てみてください。どうでしょうか？
Javascriptを使ったものは、基本的に特定のブラウザでのみ正常に動かないなどの問題が見受けられます。

私も、先日、こういうスライドの表示がおかしいと言う問題を抱えて、このコンテンツスライダーにしたのですが、ほかのスライド系のプラグインを試してみるのもいいかも知れません。
nobita
(@nobita)

11年前
そのプラグインを使っていないので、参考になるかどうか分かりませんが、

私は、スライダーを表示できる、enoughとテーマを作っていて、その時に、IE8が動作しなくて、困った事がありました。

サンプル
```
<script type="text/javascript" id="enough-slider-js">
            jQuery(function() {
			<?php
			$last = end( $upload_image );?>
                jQuery('header').crossSlide({
                sleep: <?php echo $sleep; ?>,
                fade: <?php echo $fade; ?>
                },[<?php foreach ($upload_image as $key => $value){
                if($value == $last){$separator = '';}else{$separator = ',';}?>
            {src: '<?php echo $value['url']; ?>' }<?php echo $separator;?><?php } ?>])
            });
            </script>
```
json を作る時に、最後にカンマが入っているとIEは動かないというものでした。

jquery.cross-slide.js　で動くスライダーなので、答えにはならないかもしれませんが、同じような処理があれば、やってみてください
トピック投稿者 web-sakura
(@web-sakura)

11年前

ihironaka55様、nobita様、投稿ありがとうございます。
お二人のご意見をもとに色々調べた結果、nobita様の「joinの最後のカンマ」がありました。
ただ、jsもphpも初心者なのでカンマを消す方法がわからず、試行錯誤中です。
結果が出たら、またご報告させていただきます！

トピック投稿者 web-sakura
(@web-sakura)

11年前

申し訳ございません。
何とか自力で解決しようと思ったのですが、お手上げです・・・

下記にソースをコピーをさせて頂きますので図々しいお願いで申し訳ございませんが、
何かアドバイスを頂ければ幸いです。

IE特有のバグになってそうな、html側のソース部分
<script type=”text/javascript”>
var $jquery = jQuery.noConflict();
$jquery(document).ready(function()
{
$jquery(‘#wpcontent_slider’).coinslider(
{
width: 960,
height: 150,
spw: 7,
sph: 5,
delay: 5000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: ”,
navigation: true,
links : true,
hoverPause: true });
});
</script>

上記のカンマを削除したいのですが、下記のjsファイルが関連してると思うのですが・・・
/**
* Coin Slider – Unique jQuery Image Slider
* @version: 1.0 – (2010/04/04)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://workshop.rs/projects/coin-slider/

* Licensed under MIT licence:
* http://www.opensource.org/licenses/mit-license.php
**/

(function($) {

var params = new Array
var order = new Array
var images = new Array
var links = new Array
var linksTarget = new Array
var titles = new Array
var interval = new Array
var imagePos = new Array
var appInterval = new Array
var squarePos = new Array
var reverse = new Array

$.fn.coinslider= $.fn.CoinSlider = function(options){

init = function(el){

order[el.id] = new Array(); // order of square appereance
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;

params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);

// create images, links and titles arrays
$.each($(‘#’+el.id+’ img’), function(i,item){
images[el.id][i] = $(item).attr(‘src’);
links[el.id][i] = $(item).parent().is(‘a’) ? $(item).parent().attr(‘href’) : ”;
linksTarget[el.id][i] = $(item).parent().is(‘a’) ? $(item).parent().attr(‘target’) : ”;
titles[el.id][i] = $(item).next().is(‘span’) ? $(item).next().html() : ”;
$(item).hide();
$(item).next().hide();
});

// set panel
$(el).css({
‘background-image’:’url(‘+images[el.id][0]+’)’,
‘width’: params[el.id].width,
‘height’: params[el.id].height,
‘position’: ‘relative’,
‘background-position’: ‘top left’
}).wrap(“<div class=’coin-slider’ id=’coin-slider-“+el.id+”‘ />”);

// create title bar
$(‘#’+el.id).append(“<div class=’cs-title’ id=’cs-title-“+el.id+”‘ style=’position: absolute; bottom:0; left: 0; z-index: 1000;’></div>”);

$.setFields(el);

if(params[el.id].navigation)
$.setNavigation(el);

$.transition(el,0);
$.transitionCall(el);

}

// squares positions
$.setFields = function(el){

tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);

counter = sLeft = sTop = 0;
tgapx = gapx = params[el.id].width – params[el.id].spw*sWidth;
tgapy = gapy = params[el.id].height – params[el.id].sph*sHeight;

for(i=1;i <= params[el.id].sph;i++){
gapx = tgapx;

if(gapy > 0){
gapy–;
sHeight = tHeight+1;
} else {
sHeight = tHeight;
}

for(j=1; j <= params[el.id].spw; j++){

if(gapx > 0){
gapx–;
sWidth = tWidth+1;
} else {
sWidth = tWidth;
}

order[el.id][counter] = i+”+j;
counter++;

if(params[el.id].links)
$(‘#’+el.id).append(““);
else
$(‘#’+el.id).append(“<div class=’cs-“+el.id+”‘ id=’cs-“+el.id+i+j+”‘ style=’width:”+sWidth+”px; height:”+sHeight+”px; float: left; position: absolute;’></div>”);

// positioning squares
$(“#cs-“+el.id+i+j).css({
‘background-position’: -sLeft +’px ‘+(-sTop+’px’),
‘left’ : sLeft ,
‘top’: sTop
});

sLeft += sWidth;
}

sTop += sHeight;
sLeft = 0;

}

$(‘.cs-‘+el.id).mouseover(function(){
$(‘#cs-navigation-‘+el.id).show();
});

$(‘.cs-‘+el.id).mouseout(function(){
$(‘#cs-navigation-‘+el.id).hide();
});

$(‘#cs-title-‘+el.id).mouseover(function(){
$(‘#cs-navigation-‘+el.id).show();
});

$(‘#cs-title-‘+el.id).mouseout(function(){
$(‘#cs-navigation-‘+el.id).hide();
});

if(params[el.id].hoverPause){
$(‘.cs-‘+el.id).mouseover(function(){
params[el.id].pause = true;
});

$(‘.cs-‘+el.id).mouseout(function(){
params[el.id].pause = false;
});

$(‘#cs-title-‘+el.id).mouseover(function(){
params[el.id].pause = true;
});

$(‘#cs-title-‘+el.id).mouseout(function(){
params[el.id].pause = false;
});
}

};

$.transitionCall = function(el){

clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
interval[el.id] = setInterval(function() { $.transition(el) }, delay);

}

// transitions
$.transition = function(el,direction){

if(params[el.id].pause == true) return;

$.effect(el);

squarePos[el.id] = 0;
appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay);

$(el).css({ ‘background-image’: ‘url(‘+images[el.id][imagePos[el.id]]+’)’ });

if(typeof(direction) == “undefined”)
imagePos[el.id]++;
else
if(direction == ‘prev’)
imagePos[el.id]–;
else
imagePos[el.id] = direction;

if (imagePos[el.id] == images[el.id].length) {
imagePos[el.id] = 0;
}

if (imagePos[el.id] == -1){
imagePos[el.id] = images[el.id].length-1;
}

$(‘.cs-button-‘+el.id).removeClass(‘cs-active’);
$(‘#cs-button-‘+el.id+”-“+(imagePos[el.id]+1)).addClass(‘cs-active’);

if(titles[el.id][imagePos[el.id]]){
$(‘#cs-title-‘+el.id).css({ ‘opacity’ : 0 }).animate({ ‘opacity’ : params[el.id].opacity }, params[el.id].titleSpeed);
$(‘#cs-title-‘+el.id).html(titles[el.id][imagePos[el.id]]);
} else {
$(‘#cs-title-‘+el.id).css(‘opacity’,0);
}

};

$.appereance = function(el,sid){

$(‘.cs-‘+el.id).attr(‘href’,links[el.id][imagePos[el.id]]).attr(‘target’,linksTarget[el.id][imagePos[el.id]]);

if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
clearInterval(appInterval[el.id]);
return;
}

$(‘#cs-‘+el.id+sid).css({ opacity: 0, ‘background-image’: ‘url(‘+images[el.id][imagePos[el.id]]+’)’ });
$(‘#cs-‘+el.id+sid).animate({ opacity: 1 }, 300);
squarePos[el.id]++;

};

// navigation
$.setNavigation = function(el){
// create prev and next
$(el).append(“<div id=’cs-navigation-“+el.id+”‘></div>”);
$(‘#cs-navigation-‘+el.id).hide();

$(‘#cs-navigation-‘+el.id).append(“<“);
$(‘#cs-navigation-‘+el.id).append(“>“);
$(‘#cs-prev-‘+el.id).css({
‘position’ : ‘absolute’,
‘top’ : params[el.id].height/2 – 15,
‘left’ : 0,
‘z-index’ : 1001,
‘line-height’: ’30px’,
‘opacity’ : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el,’prev’);
$.transitionCall(el);
}).mouseover( function(){ $(‘#cs-navigation-‘+el.id).show() });

$(‘#cs-next-‘+el.id).css({
‘position’ : ‘absolute’,
‘top’ : params[el.id].height/2 – 15,
‘right’ : 0,
‘z-index’ : 1001,
‘line-height’: ’30px’,
‘opacity’ : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}).mouseover( function(){ $(‘#cs-navigation-‘+el.id).show() });

// image buttons
$(“<div id=’cs-buttons-“+el.id+”‘ class=’cs-buttons’></div>”).appendTo($(‘#coin-slider-‘+el.id));

for(k=1;k<images[el.id].length+1;k++){
$(‘#cs-buttons-‘+el.id).append(““+k+”“);
}

$.each($(‘.cs-button-‘+el.id), function(i,item){
$(item).click( function(e){
$(‘.cs-button-‘+el.id).removeClass(‘cs-active’);
$(this).addClass(‘cs-active’);
e.preventDefault();
$.transition(el,i);
$.transitionCall(el);
})
});

$(‘#cs-navigation-‘+el.id+’ a’).mouseout(function(){
$(‘#cs-navigation-‘+el.id).hide();
params[el.id].pause = false;
});

$(“#cs-buttons-“+el.id).css({
‘left’ : ‘50%’,
‘margin-left’ : -images[el.id].length*15/2-5,
‘position’ : ‘relative’

});

}

// effects
$.effect = function(el){

effA = [‘random’,’swirl’,’rain’,’straight’];
if(params[el.id].effect == ”)
eff = effA[Math.floor(Math.random()*(effA.length))];
else
eff = params[el.id].effect;

order[el.id] = new Array();

if(eff == ‘random’){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+”+j;
counter++;
}
}
$.random(order[el.id]);
}

if(eff == ‘rain’) {
$.rain(el);
}

if(eff == ‘swirl’)
$.swirl(el);

if(eff == ‘straight’)
$.straight(el);

reverse[el.id] *= -1;
if(reverse[el.id] > 0){
order[el.id].reverse();
}

}

// shuffle array function
$.random = function(arr) {

var i = arr.length;
if ( i == 0 ) return false;
while ( –i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}

//swirl effect by milos popovic
$.swirl = function(el){

var n = params[el.id].sph;
var m = params[el.id].spw;

var x = 1;
var y = 1;
var going = 0;
var num = 0;
var c = 0;

var dowhile = true;

while(dowhile) {

num = (going==0 || going==2) ? m : n;

for (i=1;i<=num;i++){

order[el.id][c] = x+”+y;
c++;

if(i!=num){
switch(going){
case 0 : y++; break;
case 1 : x++; break;
case 2 : y–; break;
case 3 : x–; break;

}
}
}

going = (going+1)%4;

switch(going){
case 0 : m–; y++; break;
case 1 : n–; x++; break;
case 2 : m–; y–; break;
case 3 : n–; x–; break;
}

check = $.max(n,m) – $.min(n,m);
if(m<=check && n<=check)
dowhile = false;

}
}

// rain effect
$.rain = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;

var c = 0;
var to = to2 = from = 1;
var dowhile = true;

while(dowhile){

for(i=from;i<=to;i++){
order[el.id][c] = i+”+parseInt(to2-i+1);
c++;
}

to2++;

if(to < n && to2 < m && n<m){
to++;
}

if(to < n && n>=m){
to++;
}

if(to2 > m){
from++;
}

if(from > to) dowhile= false;

}

}

// straight effect
$.straight = function(el){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+”+j;
counter++;
}

}
}

$.min = function(n,m){
if (n>m) return m;
else return n;
}

$.max = function(n,m){
if (n<m) return m;
else return n;
}

this.each (
function(){ init(this); }
);

};

// default values
$.fn.coinslider.defaults = {
width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: ”, // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
};

})(jQuery);

お手数をおかけしますが、宜しくお願い致します！
nobita
(@nobita)

11年前
下記にソースをコピーをさせて頂きますので図々しいお願いで申し訳ございませんが、
何かアドバイスを頂ければ幸いです。

プラグインをインストールし、動作確認を行いましたが、テスト環境では、IE8がクラッシュしました。（数回試みて、全部　chromeはok）

デバッグモードでは、noticeレベルですが、10個ほど出ていました
```
content_slide.php:292 - Undefined index: slide_imageheading1
```
コードに関しても、
```
<?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>
```
スライダーの表示部分ですが、ワードプレスコアで使っているプレフィックスを使っているなど、通常プラグインのプレフィックスとしては不適切なものを使っていました。
内部の関数でも、同じような感じなので、コンフリクトしやすいプラグインだと思います。

プラグインの改造に関しては、プラグインのアップデートの時に、すべて元に戻ってしまいます

他のスライダープラグインを検討されたほうがいいのではないかと思います。

5件の返信を表示中 - 1 - 5件目 (全5件中)

トピック「ContentSlideがIEで動かない現象」には新たに返信することはできません。

トピックタグ

表示