jqueryのcolorboxを読込直後に開きたい
- この記事では、jqueryのcolorboxプラグインを使用して、画像をクリックせずに自動的にモダルダイアログを開く方法について説明します。
- 具体的には、colorboxプラグインを読み込んだ直後にモダルダイアログを表示するために、javascriptのコードを追加する必要があります。
- さらに、colorboxプラグインを使用してyoutubeのビデオも表示する方法についても解説します。
- ベストアンサー
jqueryのcolorboxを読込直後に開きたい
ある書籍に記載されていた、以下のサンプルがあります。 このサンプルは、画像をクリックすると、colorboxプラグインを使用して モダルダイアログが開きます。 これを、ページを開いた直後（クリックせずに、自動的）に開きたいのです。 その方法をお教えいただけませんでしょうか。 よろしくお願いいたします。 <!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> <title>jQuery - colorbox plugin (Flash Video : Embedded)</title> <link href="base.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <script src="../../scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.colorbox-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.youtube').colorbox(); }); </script> </head> <body> <p> <a class='youtube' href="content/flash.htm" title="Martin Luther King, Jr.'s last speech"> <img src="http://i4.ytimg.com/vi/o0FiCxZKuv8/default.jpg" alt="YouTube (Embedded)" /> </a> </p> </body> </html>
- dragstarsp
- お礼率22% (84/379)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
画面表示時にclickイベントも実行してしまうのはどうでしょうか。 $(function() { $('a.youtube').colorbox(); $('a.youtube').click(); //追加 });
その他の回答 (1)
$('a.youtube').colorbox(); を $('a.youtube').colorbox({open:true}); に変えればよいでしょう。(私がテストした限りでは自動的に開きました。) # ColorBoxのサイト(参考URL)のInstructionの項に書いてあります。
関連するQ&A
- [ｊQuery]colorboxの干渉について
当方jQuery初心者です。この場を借りてご質問させて下さい。 現在、jQueryのfullPage(http://alvarotrigo.com/fullPage/)を使用した、横スクロールのサイトを作成しております。 そのコンテンツの中で、同じくjQueryのcolorbox(http://www.jacklmoore.com/colorbox/)を使用し、 インラインhtmlを表示させたいと思っております。 しかしながら、同時に動かそうとするとcolorboxが全く動きません。 単体でのcolorboxは動くので、恐らくfullPageとの干渉を起こしていると思うのですが、何か解決方法はございませんでしょうか。 質問させていただく前に調べた結果、colorboxはスライダーと干渉を起こすとのことで、 colorboxのreturnFocusをfalseにすることで解消されるとあったのですが、それでも解消されませんでした。 どなたかご教示頂けますようよろしくお願い致します。 以下、現在のソースです。 ------------------------------------------------------------ <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type='text/javascript' src='js/moment.min.js'></script> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false, anchors: ['page'], navigation: false, navigationPosition: 'right', navigationTooltips: ['page'], slidesNavigation: true, slidesNavPosition: 'top', //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: false, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, normalScrollElements: '#element1, .element2', scrollOverflow: true, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true, animateAnchor: true, recordHistory: true, //Design controlArrows: true, verticalCentered: true, paddingTop: '-10em', resize : false, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction){} }); }); </script> <script src="js/jquery.colorbox.js"></script> <script> $(function(){ $(".inline").colorbox({ inline: true width:"700px" returnFocus: false }); }); </script> ------------------------------------------------------------
- 締切済み
- HTML
- colorbox 画像が表示されない
質問おねがい致します。 本業は紙媒体で 並行して独学でwebを学んでおりますがJqueryのcolorboxが表示されずに いきづまっています。パスが違うとか素人の失敗だとはおもうんですが ドリームウィーヴァーで作成しているのですが テンプレートファイルを作成し 追加ページで画像にリンクをはり <div class="box"><a href="/images/mapBig.png" rel="example1" title="map"><img src="/images/mapSmall.png" width="245" height="147" alt="map" /></a></div> としているのですが ライブビューではちゃんとポップアップになるのですが ブラウザーでプレビューしたりサーバーアップして確認すると オーバーレイの黒い背景と白い棒が２本でてきて画像自体が表示されません 下記はテンプレートのソースです。 ジャバの部分はcolorboxからペーストです colorbox.cssの画像へのパスは url(images/controls.png) に統一しています どなたかお願いします！！ <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <!-- TemplateBeginEditable name="doctitle" --> <title>00000000000000000000</title> <!-- TemplateEndEditable --> <meta name="description" content="0000000000000000000000000" /> <meta name="keywords" content="00000000000000000000000000000" /> <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/colorbox/colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head>
- ベストアンサー
- JavaScript
- jqueryについて質問です。
jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html
- 締切済み
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- JQuery の CrossSlideを設置したのですが IEでだけ表示できません。
JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。 ブラウザのエラーでは 「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」 とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。 ソース -head- <!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=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...
- ベストアンサー
- JavaScript
- jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { width: 640px; height: 415px; margin: 0; padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
- jquery-colorboxが反応しません・・・
Wordpressのプラグインでjquery-colorboxってのを使いたいのですが上手く動いてくれません・・・ ネットで調べたらheader部分になにか追加したら動くとあったのですがよくわかりませんでした・・・ 今ヘッダー部分は <!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" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php if ( is_home() ) { ?> <? bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php } ?> <?php if ( is_search() ) { ?> Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?> <?php } ?> <?php if ( is_404() ) { ?> <? bloginfo('name'); ?> | 404 Nothing Found <?php } ?> <?php if ( is_author() ) { ?> <? bloginfo('name'); ?> | Author Archives <?php } ?> <?php if ( is_single() ) { ?> <?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_page() ) { ?> <? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <?php wp_title(''); ?> <?php } ?> <?php if ( is_category() ) { ?> <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_month() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?> <?php } ?> <?php if ( is_day() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?> <?php } ?> <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?> <?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sprinkle.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/colortip-1.0-jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/contact-form.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/blogger.js"></script> <!--[if IE 6]> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styleie6.css" type="text/css" media="screen" /> <![endif]--> </head> ってなってます。どうすれば動きますか？？ サイトURLはhttp://mooommm.com/ 添付画像はプラグインの設定部分の画像です！
- 締切済み
- JavaScript
- jqueryとlightboxが一緒に動作しない
jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか？ ソースコードは以下のようになっています。 <?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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() { $("#menu_list p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings(); }); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。
- ベストアンサー
- インターネットビジネス
- jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!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" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？ 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
- iframe内部でJquery UI res
以下のようにiframe内の画像にはjquery ui resizableが有効になりません。 なぜでしょうか。iframe外の画像には有効です。 <!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=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" /> <script> $(function() { $("#ifm").contents().find("body").append('<img src="../static/image/logo.gif" class="resizable" />'); $( ".resizable" ).resizable(); }); </script> </head> <body> <img src="../static/image/logo.gif" class="resizable" width="200" height="50"/> <iframe id="ifm" ></iframe> </body> </html>
- 締切済み
- JavaScript
