• 締切済み

colorboxにいいね！ボタンなどをいれたい

今、ギャラリー風のサイトを構築中です。 Lightbox風のjQueryプラグイン、ColorBoxを使用しております。 ColorBoxはサムネールをクリックして、画面が暗転して画像が拡大表示されると、 右下に×の閉じるボタンが表示されます。 その左隣あたりに、Facebookのいいね！ボタンとピンタレストの“Pin it”ボタンを 設置したいのですが...JavaScriptが全然分からないので、 どこを触って良いかも分かりません。 拡大画像をHTML上でマークアップするさいに、aタグのtitleの所を上手く使う方法も あるのかな？とも思いますが、いちいちtitleに書き込むのもちょっと煩雑ですし、 できればJavaScriptにて自動に表示されれば...と思っております。 お分かりになる方、どうぞご教授ください。

みんなの回答

回答No.1

　　ボタンを表示させたいのなら　 button goto "いいね！" , *label *label print "いいね！しました的なｗ文をここに"　　：あとは実行したら何をするかをプログラムする 少し説明下手なので　すみません

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • iframeからcolorboxの呼び出し

    IEでのみエラーが起きていて、ハマってしまいました。 おかしな所などご指摘頂けると助かります。 トップページ内にiframeを読み込んでいます。 iframe内に設置した画像をクリックして、 トップページのcolorboxを呼び出して表示させています。 下記サイトを参考に、colorboxをiframe内から親ページに展開させる設定しています。 http://www.browncrown.net/blog/?p=2120 ■top.html ・colorbox用のjquery、css等一式読込 ・トップページ内の画像でも同じ画像を呼び出して表示させている→問題なし ・専用javascript記載 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script src="jquery.colorbox.js"></script> <script> function cbox(url,ttl){ var href = url; var title = ttl; $.fn.colorbox({ width: "500px", height: "500px", href:href, title:title, iframe: true, scrolling: "auto" }); } </script> ■iframe.html ・galleryviewというギャラリーを使用して、バナーをスライドしている。 　その中の画像をクリックして、親（top.html）にcolorboxで画像を表示したい。 ・専用javascript記載 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script> function callparent(url,ttl){ parent.cbox(url,ttl); } </script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ・colorbox呼び出し <a href="javascript:callparent('img/hoge.jpg','画像タイトル')"><img src="img/bnr.jpg" /></a> この設定でIEでのみエラーが出てしまいます。。 他のブラウザでは問題なく表示されます。 エラー内容は下記になります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ このページは表示できません • Web アドレス javascript:callparent('img/hoge.jpg' が正しいか確かめてください。 • 検索エンジンでそのページを探してください。 • 数分待ってから、ページを最新の情報に更新してください。 おかしな部分、ご指摘頂けると幸いです。

  • jQueryイメージギャラリーでの画像保護方法

    はじめまして。 jQueryプラグインの「lightbox」や「colorbox」などを用いたフォトギャラリーにて、 右クリックやドロップによる画像の持ち出しを禁止する方法を探しております。 表示画像に自動で透明画像を被せる、表示部分だけメニュー無効化などでしょうか。 保存に一手間を取らせる程度の簡単なもので構いません。 可能ならばlightboxもしくはcolorboxを利用したいのですが、似たようなものは多くあると思いますので、他のプラグインでも大丈夫です。 どうぞよろしくお願い申し上げます。

  • 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>

  • colorboxの直接呼び出し方法について

    通常、このような感じでjqueryのcolorboxを使ってますが、 （問題なく動きます。） <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.colorbox.js'></script> <script> 　$(document).ready(function(){ 　　$('.colorbox').colorbox({iframe:true, innerWidth:700, innerHeight:430}); 　}); </script> <li><a href='test2.html' class='colorbox'>test2</a></li> 質問ですが、ipadである場所をクリックしたときに、動作する部分に、動くスクリプト内でカラーボックスを使って表示するところの書き方がわかりません。 <script> 　document.addEventListener('touchstart',catchTouch, false); 　function catchTouch(event) { 　　cX =event.touches[0].clientX; 　　cY =event.touches[0].clientY; 　if(10 <= cX && cX <= 170 && 10 <= cY && cY <= 40){pageScroll('fragment-1');} 　else if (10 <= cX && cX <= 170 && 650 <= cY && cY <= 680){window.open('order4.html','colorbox');} 　else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){location.href='call.html';} 　else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){？？？？？？？？;} 　} </script> ？？？？？？？？のところに何かを記述して、 <li><a href='test2.html' class='colorbox'>test2</a></li> これの動作と同じ事を実現するにはどのようにしたらよいのでしょうか？

  • colorbox JS拡大時だけFlashを消す

    サイト構築をしている中でわからないことがあり質問させていただきました。 サイトでcolorbox.jsを使っているのですが拡大時にFlash部分が前面に出てきてしまい色々調べたところembed wmode="transparent"で回避ができたのですが、今度はFlash内の全角入力ができなくなってしまいました。色々検索したところ他のjavascriptでは http://www.masuta.net/wordpress/wp/archives/296 のように拡大時にFlashを消す方法があるようなのですがcolorboxを使っている場合どのようにソースを書き換えたらいいかわからず質問させていただきました。上記のHighslide.jsを使うのも１つの手段化と思いますが、他のjsでjqueryを使っている為、できればcolorboxを使い対処したいのですが・・・。教えていただければ幸いです。

  • 「jQuery」Lightboxのアニメーションを無くしたい

    フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin （http://leandrovieira.com/projects/jquery/lightbox/） を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。（拡大時の背景のオーバーレイもずれている） これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

  • [ｊ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> ------------------------------------------------------------

  • 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>

  • colorbox.js 画像クリックで閉じる

    colorbox.jsを使用して、画像を拡大表示させたあと、 画像以外の部分をクリックしたときにウィンドウが閉じるのと同じように、 画像事体のどこをクリックしても、ウィンドウが閉じるようにしたいのですが、 どのようにすればよいでしょうか？ 現在は画像全体に閉じるイベントを設定したHTMLファイルを別に作成し、 colorbox.jsでiframeとしてポップアップさせているのですが、 画像ごとにＨＴＭＬファイルを作成しなくても、可能な方法がございましたら、 ぜひご教授して頂けますようよろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する