初めまして。
HTML CSSを若干触れるものです。
サイトを制作していまして、
一部にlightboxをスクリプトタグで表示させていたのですが
新たに違うスクリプトタグ(トップ画像の上を画像がふらふら動くイメージのため)
によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。
こちらがjugemで用意されたlightboxタグです。
<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.j …
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scripta …
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js" …
ここからが後から入れたタグです。
<script type="text/javascript">
$(function() {
var bg1 = $('#main-img');
var speed = 3000;
cloudMove();
setInterval(cloudMove, 6000);
function cloudMove(){
bg1
.animate({backgroundPosition:'30px'}, speed)
.animate({backgroundPosition:'0'}, speed);
}
});
</script>
これらは一緒に効果を出す事は可能でしょうか?
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
私の環境では、以下の通りで動きましたよ。
--------------------
<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.j …
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scripta …
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js" …
<link rel="stylesheet" href="http://js.jugem.jp/Lightbox/2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
var bg1 = $('#main-img');
var speed = 3000;
cloudMove();
setInterval(cloudMove, 6000);
function cloudMove(){
bg1
.animate({backgroundPosition:'30px'}, speed)
.animate({backgroundPosition:'0'}, speed);
}
});
</script>
<style type="text/css">
#main-img{
height: 250px;
background-image: url(サンプル画像.jpg);
}
</style>
</head>
<body>
<!-- cloudMove -->
<div id="main-img"></div>
<!--lightbox -->
<a href="(画像へのパス)" rel="lightbox" title="(画像タイトル)">画像表示</a>
--------------------
たしかに、そのまんまでは競合していました。
////////////////////////////
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
////////////////////////////
として、上記のソースで動きました。
ご参考までに。
参考URL:http://semooh.jp/jquery/ref/cont/with_prototype/
kao03さん
ありがとうございます!
できました!ぱっとみてすぐに理解出来るんですね。
すごい、、。
精進します。また何かありましたら
よろしくお願いします!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
カラムで段組と段組の間に隙間...
-
width100%とfloat
-
透過pngの透明部分以外をクリッ...
-
jQueryでタブ切り替え
-
jQueryでシンプルドラッグドロ...
-
javascriptテキストBOX色を元に...
-
jQueryでネスト構造の<li>がク...
-
変数内容をHTML内で表示する方法
-
「jQuery」アコーディオンメニ...
-
「画像クリックで音声再生」を ...
-
これはどんなJavaScriptなので...
-
JavaScriptで、?マークとコロ...
-
jQueryでヒアドキュメントを使...
-
1枚の画像をクリックして複数の...
-
画像を切り替えランダム表示
-
jQueryで同じid属性が複数あっ...
-
JSPでの画像ファイル表示
-
javaを使ってマウスオンでの画...
-
outlook2010の不具合で困ってい...
-
JimdoでWebアイコンフォントの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
スタイルシートで画面を上下に...
-
Flickity で画像にリンクを貼る...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
画像の特定の座標にカーソルが...
-
HTMLですCSSです 画像のように...
-
スタイルシートで位置固定する...
おすすめ情報