質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1599閲覧

jQuery プラグインが別のプラグインの動作に影響する件です。

marshmallowy

総合スコア204

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2016/06/28 08:05

###前提・実現したいこと
1ページ内でOwlCarousel と Colorbox を使用しています。
そして、「Zoom」ボタンをクリックし 「Colorbox」を操作したあと、ポップアップ・ウィンドウを閉じたら、「OwlCarousel」のメイン画像部分が反復されます。

「Colorbox」を操作したあと、「OwlCarousel」のメイン画像部分が反復しないようにするにはどうすればよろしいでしょうか。

ご教授の程、よろしくお願いします。

###確認用のURL
http://www.ks-clothing.click/women/tops-blouses/black-nolita-cami.html

###該当のソースコード

<?php $_product = $this->getProduct(); $_helper = $this->helper('catalog/output'); ?> <div id="sync1" class="owl-carousel"> <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?> <?php if ($this->isGalleryImageVisible($_image)): ?> <div class="item"> <div class="cloud-zoom" rel="position: 'inside' , showTitle: false" href="<?php echo $this->getGalleryImageUrl($_image); ?>"> <img src="<?php echo $this->getGalleryImageUrl($_image); ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" /> </div> <a class="gallery" href="<?php echo $this->getGalleryImageUrl($_image); ?>">ZOOM</a> </div> <?php endif; ?> <?php $i++; endforeach; ?> </div> <?php if (count($this->getGalleryImages()) > 0): ?> <div id="sync2" class="owl-carousel"> <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?> <?php if ($this->isGalleryImageVisible($_image)): ?> <div class="item"> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" /> </div> <?php endif; ?> <?php $i++; endforeach; ?> </div> <?php endif; ?> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function($){ $(function(){ $(".gallery").colorbox({ rel:'slideshow', maxWidth:"100%", maxHeight:"100%", opacity: 0.5 }); var sync1 = $("#sync1"); var sync2 = $("#sync2"); sync1.owlCarousel({ singleItem : true, slideSpeed : 1000, navigation: true, pagination:false, afterAction : syncPosition, responsiveRefreshRate : 200, }); sync2.owlCarousel({ items : 15, itemsDesktop : [1199,10], itemsDesktopSmall : [979,10], itemsTablet : [768,8], itemsMobile : [479,4], pagination:false, responsiveRefreshRate : 100, afterInit : function(el){ el.find(".owl-item").eq(0).addClass("synced"); } }); function syncPosition(el){ var current = this.currentItem; $("#sync2") .find(".owl-item") .removeClass("synced") .eq(current) .addClass("synced") if($("#sync2").data("owlCarousel") !== undefined){ center(current) } } $("#sync2").on("click", ".owl-item", function(e){ e.preventDefault(); var number = $(this).data("owlItem"); sync1.trigger("owl.goTo",number); }); function center(number){ var sync2visible = sync2.data("owlCarousel").owl.visibleItems; var num = number; var found = false; for(var i in sync2visible){ if(num === sync2visible[i]){ var found = true; } } if(found===false){ if(num>sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", num - sync2visible.length+2) }else{ if(num - 1 === -1){ num = 0; } sync2.trigger("owl.goTo", num); } } else if(num === sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", sync2visible[1]) } else if(num === sync2visible[0]){ sync2.trigger("owl.goTo", num-1) } } }); }); //]]> </script>

###補足情報
jquery-1.10.2.min.js
Owl Carousel
Colorbox

kei344👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manabufukai

2016/06/28 16:02

colorbox自体開かないんですが…(画像へ飛ぶ)あと「メイン画像部分が反復」とはどういう状態ですか?
kei344

2016/06/28 16:07

確認用のURLでColorboxが動いていないようなのですが、解決されたのでしょうか。また、確認用URLにもリンクを貼っていただけると回答者が確認しやすいので、よろしくお願いします。
marshmallowy

2016/06/29 00:52

co‌​lorboxが動作していなかったのは、何処が原因か調べていたためでした。 依然、問題を解決できていません。ご教授、ご協力よろしくお願いします。
guest

回答2

0

自己解決

Colorboxを開発している "Jack Moore" さんにお尋ねしたところ、"returnFocus: false"を追加することでエクステンション同士の衝突する問題を解決しました。

投稿2016/08/10 02:28

marshmallowy

総合スコア204

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

まず、 noconflict.js で JQuery が $ではなくなっているので、
colorboxをセットしようと $を使っている部分を $j なり jQuery に変更する必要があるかと思います。 ほかにも直す箇所がありそうですよね。

$j("a.gallery[rel^='slideshow']").colorbox();
の部分ですが、 指定されている箇所の表記もおかしいので修正する必要があります。
"a.gallery[rel^='slideshow']" では 該当するものはありません。

投稿2016/06/29 00:29

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/29 01:38

何が変なのか、現時点のページからは自分には分かりませんが、 $("#sync1") も $("#sync2")も修正しないと
marshmallowy

2016/06/29 02:50

ご教授ありがとうございます。 "$" を "jQuery" に置き換えましたが、依然として「OwlCarousel」のメイン画像部分が反復されます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問