【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方
今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを読み込む はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog
クライアントから「サイト内の画像を保存できないようにしてほしい！」というご要望をいただくことがたまにあります。 ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です。 ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。 なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。 １：jQueryで「contextmenu」イベントを使って右クリックを禁止にする ２：スマホの場合 CSSを使って長押しアクションを禁止する ３：スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする ４：jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる １：jQueryで「contextmenu」
![[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3dc975c11ef80489c34cee076c9d6afb23bc3dc/height=288;version=1;width=512/http%3A%2F%2Fhi-posi.co.jp%2Ftech%2Fwp-content%2Fuploads%2F2015%2F04%2FdwImageProtectorPlugin.jpg)
slick 導入・矢印画像差し替え - Qiita
１．ファイル構成 slick.css slick-theme.css fontフォルダ ajax-loader.gif をcssフォルダにぶっこむ。 slick.min.js をjsフォルダに。 ２．ファイル読み込み <link rel="stylesheet" type="text/css" href="/css/slick.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/slick-theme.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/style.css" media="all"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
Lightbox2 | Webサイト制作支援 | ShanaBrian Website
Lightbox2.0の使用方法をご紹介しています。 Lightbox2は別ウィンドウ（ポップアップウィンドウ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 公式サイト ※ 2012年4月10日に2.5にバージョンアップされ、prototypeからjQueryへと変更されていますので、Lightbox2を新しく設置される方はLightbox2.5～2.7の使い方をご覧ください。 ※ IE10でうまく動作しない場合は、prototype.jsを1.7.1以降にバージョンアップすることで解消されます。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 グループ化 キャプション 設置時に異なる階層への対応方法 ダウンロードと設置 こちらにアクセスして「View Raw」をクリック、ダウンロードして解凍し
使い勝手の良いslick.jsスライダー（レスポンシブ対応）
今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！ まずはこんな感じ！といった「デモサンプル」を用意しましたので確認してみてください。 デモサンプル1 横幅固定でセンター寄せのスライドになっています。左右にカルーセル付きの仕様になっています。 それでは使い方を見ていきましょう。 1.ファイルをダウンロード はじめに、ファイル一式を公式サイトからダウンロードします。 slick 「slickフォルダ」の中に以下のファイルが入っています。 これを任意の場所に配置して読み込みましょう。サンプルでは、ルート階層に「slickフォルダ」を配置したと仮定して話をしていきます。 2.必要なファイルを読み込む CSSを読み込
カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ
ネットショップ運営[楽天・ECサイト]に関する情報 便利ツール Webサービス CSS Javascript jQueryなど紹介していきます 商品を陳列する際によく使われているカルーセル表示について、すでにショップページで利用している方も多いのではないでしょうか。そんなカルーセルを実装するためのjQueryプラグインもたくさんあり、どれを使ったら良いかわかりませんよね。 そんな中このプラグインさえ抑えておけばカルーセル表示は大丈夫というプラグインを紹介します。 カルーセル表示の細かい設定が可能な「slick.js」自由度も高く、レスポンシブにも対応 slick – the last carousel you’ll ever need 上記サイトにて動作デモが確認出来ます。 カルーセル表示と一言でいっても見た目や動きは様々です。複数アイテム同時に切り替わってほしい、自動的に動いてほしい、水
ColorboxでjQueryのモーダルウィンドウを実装する方法｜Gimmick log
TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました！素晴らしいです！ デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので（これがいい場合もあるのですが）こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は
【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。
画像や動画をポップアップで表示させるJavaScriptのプラグインで、特に有名なものでは［LightBox］が挙げられます。 ここで紹介する［Lity］は［LightBox］と同じように使えるjQueryプラグインで、レスポンシブにも対応済み。またデータ容量も4KB未満と軽量で気軽に導入できる点が魅力です。 その実装方法ですが、まずは公式配布サイトより必要なファイルをダウンロードしてきましょう。 ［Lity］：公式サイト いくつかのファイルが梱包されていますが、このうち使うのは「lity.min.css」と「lity.min.js」の２つのファイル。 当然ですが［Lity］はjQueryに依存していますので、jQuery本体のスクリプトも必要です。 lity.min.css lity.min.js jquery.js これらのファイルをHTMLの <head>～</head> 内で読み込
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応 ｜ WEBTEQ
Demoサイトはこちら http://flexslider.woothemes.com/ レスポンシブ、フリックスライドにも対応で、なかなかスムーズなスライダーですね。 【注 目】 ※非Jquery なレスポンシブスライダーのSwiperオプションも翻訳しました。 ※ついでにモーダルウィンドウ（画面中央に飛び出てくるやつネ）もつけたいときは「Lightbox2の使い方 モーダルウィンドウで写真を見せたい」も参照で。 【使い方】 １．まずはこの本サイトから必要なものをダウンロードしてくる。 http://www.woothemes.com/flexslider/ 「DOWNLOAD FLEXSLIDER」って書いてある緑のボタンですね。 ２．中身を取り出して、HTMLのhead内にはこのような感じで記述。順番はこのままで。 <link rel="stylesheet" href="flexs
[jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 | STUDIO BENKEI
トップページ jQuery [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 2013/08/29 新しいネタでもないですが、最近よく使うのでご紹介。背景に画像を表示させるプラグインは沢山ありますが、 5つぐらい試して、MaxImageに落ち着きました。 ■サンプル サンプル サンプル – 背景スライドショー 本家デモページ ■必要ファイル jQuery MaxImage – GitHub ■設置方法(スライドショー無し) cssファイルを読み込みます <link rel="stylesheet" href="/css/jquery.maximage.css" type="text/css" med
![[jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 | STUDIO BENKEI](https://cdn-ak-scissors.b.st-hatena.com/image/square/3bb180a5d03d27bf6d17d42cdf8e333efe16a7b4/height=288;version=1;width=512/https%3A%2F%2Flab.studio-benkei.com%2Fwp-content%2Fuploads%2F2018%2F03%2Fimg130829_350.jpg)
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
jQueryでタブメニューを実装（画像メニュー版）
jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー - CodingMania
スライドショー下にサムネイルのカルーセルを設置したスライドショーです。自動送り・手動送りできます。 carouFredSel を使っているので、先にjqueryとjquery.carouFredSel-6.2.1.jsを読み込みます。 サムネイル用の画像はスライド用画像を小さくして表示しているだけなので、スライド用の画像のみ用意すればサムネイル画像も表示されます。 5枚以上の構成になっていますので、5枚ない場合は、リストのタグを繰り返してください。。。 デモページへopen_in_new JSを読み込みます <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script> J
株式会社コアテック | 404 Not Found
お探しのページが 見つかりませんでした 申し訳ございません。リンクに問題があるか、 ページが削除された可能性がございます。
サムネイルの画像をクリックで拡大・切り替え・表示します！ - CodingMania
レスポンシブ対応。jqueryを使って、サムネイル画像をクリックするとメイン画像を切り替えて大きく表示します。 ヘッダーで、jquery.jsと後述のgallery.jsを読み込んでいます。 レスポンシブに対応しました【改定：2017/10/12】 1ページに複数の場合は、class指定します。 サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ ↑もあります。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="gallery.js"></script> [gallery.js]Ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpark 