- ベストアンサー
タグのキレイなスライドショーjavascript
多分一番一般的であろうと思われるlightboxを利用して、スライドショーをサイトに貼っています。 しかし、htmlをチェックするコチラ↓ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html のサイトで確認したところ、 <A> の属性 `TARGET` はあまり薦められない属性です。 <DIV> を 59行目の <A>～</A> 内に書くことはできません。 の二つのエラーが出て、トータルでマイナス50点になってしまいました。 エラーの出ない、つまり正しい記述で簡単にスライドショーを設置できる方法をご存知の方、ぜひ教えてくださいませんか。
- cottonfeel
- お礼率80% (71/88)
- ブログ
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
それはLightboxの問題ではなく、 あくまでhtmlの書き方の問題です。 エラーが出ないようなhtmlを書いても、Lightboxの動作には支障がないはずです。 （Lightboxの配布元をはじめ、利用している多くのサイトでそのようなエラーは出ていません。） どこかのサンプルを見て自分のサイトに適用するときに、なんらかのミスをしてしまったのでは？
その他の回答 (1)
- xenotactic
- ベストアンサー率54% (96/175)
lintが厳しすぎるだけです。 例えば「target」属性はリンクを新しいウインドウで開くかどうかを設定するものですが、 なぜそれがマイナスになるかというと「新しいウインドウで開くかどうかはユーザーの自由。運営者が強要してはいけない」というだけです。 私の予想ですが、 <a>～</a>内にdivを入れてはいけないというのは、 <a>がインラインで、divがボックスというだけの理由でしょう。 どのブラウザでも正しく表示されるはずです。 特に気にすることはないでしょう。
関連するQ&A
- 背景色と連動するスライドショープラグイン
お世話になります。 スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。 サンプルとして http://elegantthemes.com/preview/eStore/ こちらのサイトの様な感じにしたいと思っています。 中央部分がスライドショーになっており両サイドが背景となっているようです。 ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。 画像だけでなく文字や背景も変わっています。 ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。 lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか？ もしくは簡単なjQueryで出来そうならご教授願いたいと思います。
- ベストアンサー
- JavaScript
- CSS + Javascript でスライドショー
手動で画像を順番に表示させる、スライドショーのような表現を作ろうとしています。 色々なサイトを参考に見よう見まねで作成してみたのですが、 途中でうまくいかずに行き詰っております(´・ω・`) ［XHTML］ <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="slide" name="slide"><p>1</p></div> <div id="slide" name="slide"><p>2</p></div> <div id="slide" name="slide"><p>3</p></div> <div id="slide" name="slide"><p>4</p></div> <div id="slide" name="slide"><p>5</p></div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-10000)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(10000)">last</a> ［Javascript］ var selected = 0; function seltab(move) { o = document.getElementsByName("slide"); selected = selected + move; if (selected < 0) {selected = 0} if (selected >= o.length) {selected = o.length - 1} for (i = 0; i < o.length; i++) { if (i == selected) { o[i].style.display = "block"; } else { o[i].style.display = "none"; } } } このやり方で一応動作はしています（WIN IE + WIN Firefox にて確認） が、id が同じページ内で重複している点と、div に name を付ける点で、構文チェックに引っ掛かってしまう為、できればそれを回避したいなと思っています。 同じ動作が作れれば、Javascript の処理方法に特に拘りはありません。 お分かりになる方がいらっしゃれば、ぜひぜひご指導お願いします。
- ベストアンサー
- JavaScript
- javascriptのスライドショーについての質問です。
javascriptのスライドショーについての質問です。 javascriptの勉強を始めたところです。ある教科書の中にjQueryを使用した スライドショーのコードが掲載されていました。それを下記のように記述しましたが、 ブラウザで確認するとスクリプトのコードがそのまま表示されてしまいます。 基本的な間違いがあるように思うのですが、宜しくご回答いただけたら嬉しいです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>slideshow</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/slideshow"></script> </head> <body> <div id="slideshow"> <img id="image1" src="/livingimg/003.jpg" alt="Image 1" /> <img id="image2" src="/livingimg/004.jpg" alt="Image 2" /> </div> <div id="imagealt"><p></p></div> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> </ul> <script type="text/javascript" </script> $(document) .ready(function(){ var slideImages = $('#slideshow > img' ); slideImage.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash). attr('alt')); } return false; }); }; </body> </html>
- 締切済み
- JavaScript
- スライドショー的にサイト閲覧する方法
複数のURLが記述されたファイルがあるとして、 そのURLを一つ一つブラウザ（なんでもかまいません）に 表示させる方法・ツールを探しています。 たとえば、下記のようなURLが複数記述されているファイルがあるとします。 http://www.site-a.com/ http://www.site-b.com/ http://www.site-c.com/ 上記のファイルについて、1サイト5秒程度とかで 順次スライドショー的に表示していく方法・ツールを探しています。 もしツールがないとなれば、スライドショー閲覧が出来るブラウザを プログラムする必要があると思いますが、ブラウザプログラムについて 参考になるページがあれば、是非教えていただければと思います。 よろしくお願い致します。
- ベストアンサー
- Perl
- JavaScript の書き方、どの方法がいいの？
秀和システムのHTML&CCS&JavaScript辞典を参考にホームページの作り変えを行なっているのですが、今日あるサイトを見てから、よくわからなくなってしまったことがあります。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html で、HTML文書の文法チェックを行なってみたのですが、その際、 <SCRIPT> の属性 `LANGUAGE` はあまり薦められない属性です。 等と書かれていました。 そこで使用している本やその他のサイトで調べたところ、 ３つの書き方、language 属性とTYPE 属性、Content-Script-Typeがあることがわかったのですが、どの方法が一番、多様性があり、よい書き方なのかアドバイスをお願い致します。 ちなみにHTMLは4.01と記述しています。 また、JavaScriptはこちらのサイトから（http://jun89.xdap.jp/）お借りしたものを使用し、 現在、<SCRIPT language=JavaScript>と記述しています。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願い
imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願いいたします。 画像のロールオーバー効果を作りたく以下の記述をしました。 ［html］ <div id ="image1"> <a href="http://page.htm"></a> </div><!-- image1 end --> ［css］ #image1 a{ display:block; width:107px; background:url(img/3.gif) no-repeat; height:48px; line-height:48px; text-decoration:none; text-align:center; float:left; } #image1 a:hover{ background:url(img/33.gif) no-repeat; } 上記の記述を以下のhtmlチエッカーに掛けた所、以下のエラーが出ました。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html line 460: <a> と </a> の間が空です。 → 解説 51 どうやら<a>と</a>の間に画像に表示をする、テキストを入れるということのようですが、私が今回使用している画像は既に文字の入っているもので、<a>と</a>間に何らかのテキストを入れてしまうと、文字が画像上で二重書き見たくなってしまいます。 このような場合は、どのような対処方法が御座いますでしょうか？ どなた様か、ご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- [JavaScript] oncontextmenuについて
[JavaScript] oncontextmenuについて 開発環境：Visual Studio2005 XHTML 1.0 Transitional において、 <div oncontextmenu="return false"></div> のように記述すると、属性oncontextmenuは要素Divの有効な属性ではありません と表示されてしまいます。 エラーの出ない記述方法をご存じの方いらっしゃいましたら、ご教授お願いします。m(_ _)m
- 締切済み
- JavaScript
- エラーの意味がわかりません
自分のサイトを文法チェックサイトでチェックしました。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 意味や修正方法がわからないものがあるので正しい記述方法を教えていただけないでしょうか。↓ 7: line 120: </EMBED> は Mozilla または MSIE 用のタグです。 1: line 72: <A> の属性 `TARGET` はあまり薦められない属性です。 3: line 109: <OBJECT> には等価な内容を書くようにしましょう。 5: line 151: <TABLE> に Mozilla または MSIE 用の属性 `BORDERCOLOR` が指定されています いいサイトがあれば教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- HTMLの構文
HTMLの構文ミスをhttp://htmllint.itc.keio.ac.jp/htmllint/htmllint.cgi こちらのサイトでチェックしていったのですが、 他のは調べたりして解決してきたのですが、 (1)<BODY> は </HEAD> の直後に続かなければなりません。 (2)<BODY> は <HTML>～</HTML> 内に1度しか書けません。12行目にもありました (3)<FONT> の COLOR 属性の色指定と <BODY BGCOLOR> の色は明度差(59.007)と色差(306)が不十分です の３つがどのように直すのか良く分かりませんでした。 ３つ目については、めちゃくちゃあります お願いします！
- ベストアンサー
- HTML
- Windows 10 のスライドショーが動きません
Windows 10 で、 壁紙をスライドショーに設定してもスライドしません。 設定 > 背景 背景: スライドショー スライドショーのアルバムを選ぶ: 任意 画像の切り替え間隔: 任意 シャッフル: 任意 調整方法を選ぶ: 任意 設定をなんどか変更しましたが、 全く改善されませんでした。 壁紙じたいは表示されますが、 スライドしません。 一生同じ壁紙が表示され続けます。 インターネットで原因を調査しましたが、 にほんの全インターネットに解決策が記述されていないことを確認済みです。 なお、 私は Windows 10 をリリース直後から しようし続けていますが、 壁紙のスライドショーをしようするのは 今回が はじめてです。 つまり、 私以外の人でも、 私と同じ不具合が内在している可能性は充分にあります。 私と同じ不具合の人がいるのかどうか、 また、 日本語圏いがいのインターネットでは解決策が かかれているのか、 を確認したいので質問させていただきます。 よろしく お願い致します。 環境: Windows 10 Home 64bit ************************************************** 注意: OKWave の不具合により、いかのエラーのため返答できませんが、全部の回答を見ています。 ---------------------------------------- この操作は実行できません。 再度ログインをお試しいただき、改めて操作手順をご確認ください。 問題が解決しない場合は、FAQを御確認のうえ、お問い合わせください。 ---------------------------------------- この不具合について OKWave 管理者に問い合わせても、嘘の返答があるだけなので無駄です。 http://okwave.jp/qa/q9226301.html
- 締切済み
- Windows 10
お礼
ご回答ありがとうございます。 え、ほんとですか！ よくみたら、私が使っているのはlightboxではなくてLiteboxでした。 サムネイルは1枚にしていますので、該当箇所は、 <a href="a.gif" target="_blank" title="aaa" rel="lightbox[no1]"><img src="samuneiru.gif" alt="no1"></a> <a href="b.gif" target="_blank" title="bbb" rel="lightbox[no1]"><div class="hide"><img src="blank.png" alt="blank" ></div></a> <a href="c.gif" target="_blank" title="ccc" rel="lightbox[no1]"><div class="hide"><img src="blank.png" alt="blank" ></div></a> ・・・ と続いてい来ます。 本家のLightboxのhtmlも確認してみます。 ありがとうございました。