Hatena Blog Tags
はてなブログ トップ
Lightbox
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Lightbox

(ウェブ)
【らいとぼっくす】

Lightbox JS

Webブラウザで、同一画面上に画像を上乗せ表示するためのスクリプト。材料はCSSとJavascriptと少々の画像。
ひとたび縮小画像をクリックすれば、黒色半透明の背景がページを覆い、その上に拡大画像が真ん中に表示される。画像を閉じれば、元のページに戻る。

Pure CSS lightbox

数年前より各種blog上で爆発的に流行したlightboxだが、ここはてなではがんじがらめの記述タグ制限によりLightbox JSを使用できない。
「フォトライフのスライドショー使えばいいじゃん」そう思うハッピーな貴方はハッピーなままで居てください。

screenshot
トホホ感に苛まれているそこの貴方、実ははてな上でも似たような効果を得る事ができます！というわけで サンプル紹介

【動作確認環境】Firefox, Safari, Google Chrome, 他

  • “Pure CSS lightbox”はその動作に CSS3 :targetセレクタ もしくは CSS Expression を使用します。
  • 元コード自体は IE6 / IE8β2(互換モード) で動作するのですが、はてなダイアリー上では何か差し支えがあるようです。そこはおいおい解決しようかと…？
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
みっちぇのWebデザイン研究所•3年前

Tumblrイラストフォリオ4カスタマイズ【無限スクロール・サムネ表示・LightBox適応方法】

この度知り合いのイラストレーターがTumblrでポートフォリオサイトを作ったので、JavaScriptの勉強がてら、何か追加でほしい機能がないか聞いたところ、 無限スクロールを導入したい（イラストフォリオ３にはあるが、4にはない） 無限スクロールで表示された画像にはふわっとしたアニメーションをつけたい イラストは画像クリックで画面に表示され、クリックで閉じるようにしてほしい（ライトボックス機能のこと） と要望が返ってきました。 そこで、「無限スクロール導入済みのイラストフォリオ３でよいのでは？」と提案したんですが、「画像を均等に並べたい」とのことで、CSSをいじってなんとかしようと思ったものの…

#カスタマイズ#イラストフォリオ4#tumblr#無限スクロール#ライトボックス#infinitescroll#masonry

ネットで話題

もっと見る
892ブックマークLightbox 2Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compa...www.huddletogether.com
640ブックマーク個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「...kachibito.net
640ブックマークLightboxスクリプトいろいろ - DesignWalkerwww.designwalker.com
575ブックマークLightbox.js のような写真のスライドショーするライブラリ沢山：GoodpicThis shop will be powered by Are you the store owner? Log in herebridgeword.com
397ブックマークLightbox JSOverview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnai...www.huddletogether.com
391ブックマークFancybox - Fancy lightbox alternativeThis site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery...fancybox.net
349ブックマークlightboxThe Psychology of Greatness in Legendary AthletesWhat defines greatness in legendary athletes? Beyond physical prowess and skill, their characters, mental resilience, and the ability to inspire transcend their technical achievements. The enduring legacies of individuals like Lionel Messi, Cristia...www.no-margin-for-errors.com
336ブックマークLightboxGetting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on...lokeshdhakar.com
310ブックマーク画像やページをLightBox風に表示できるThickbox:phpspot開発日誌Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像...phpspot.org

関連ブログ

ふるさとスイーツ探訪記 •16日前

【決定版】ふるさと納税 おすすめ 高級マカロン 〜厳選3選〜

今回は、ふるさと納税の返礼品の中でも、特に人気が高く、リピーター続出の「贅沢マカロン」を3つ厳選してご紹介します！ この記事では、おすすめマカロン3選を、それぞれのこだわりや特徴、実際に食べた人の口コミなども詳しくお伝えしていきます。 ふるさと納税 贅沢マカロン おすすめ3選 厳選した3つのマカロンは、それぞれに魅力的な特徴を持っています。 ぜひこの記事を参考にして、あなたにぴったりのマカロンを見つけてくださいね！ ①グラモウディーズ ベーシックマカロン 引用元:https://www.glamourdise.jp/?pid=157031977 寄付金額 12,000円 自治体 兵庫県神戸市 …

Web白描•25日前

課題サイトまとめ（２）

課題サイトまとめ（２） 完成例 JavaScript / jQuery 記述例 jsjq.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript / jQuery | 課題サイト</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js" d…

webサイト制作の勉強｜2024年5月クラス用ブログ•1ヶ月前

ギャラリーページを動的にする（WordPress化）

ギャラリーページを作成後に更新出来るようにするにはWordPress化する必要があります。 今回の仕様 wordpress側から画像を追加出来る サムネイルをクリックしたらモーダルで拡大画像が表示 モーダルにはFancyBoxを使用 投稿記事のタイトル、日付、アイキャッチ画像、タグの4つを表示 高機能モーダルウィンドウ「Fancybox」のCDN 今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。 fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapp…

webサイト制作の復習 --2024年5月--•1ヶ月前

ギャラリーページを動的にする（WordPress化）

ギャラリーページを作成後に更新出来るようにするにはWordPress化する必要があります。 今回の仕様 wordpress側から画像を追加出来る サムネイルをクリックしたらモーダルで拡大画像が表示 モーダルにはFancyBoxを使用 投稿記事のタイトル、日付、アイキャッチ画像、タグの4つを表示 高機能モーダルウィンドウ「Fancybox」のCDN 今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps…

Loggol ブログ•2ヶ月前

Loggolの検知対象である「リコネサンス」とは何なのか

はじめに Loggolはウェブサーバのアクセスログを入力とし、そのログに含まれる攻撃の情報を出力する超シンプルなサービスです。例えばSQLインジェクションやパストラバーサルなど、良く知られているウェブの攻撃が検知対象です。一覧表はこちらにあります。この中に「リコネサンス」というものがあるのですが、こちらは若干聞き慣れないものだと思いますので、こちらのブログで内容を紹介します。 リコネサンス=偵察 リコネサンス(Reconnaissance)は「偵察」「調査」などを表す言葉です。サイバーセキュリティの分野では「スキャン」に非常に近いニュアンスです。たとえばこちらのオライリーの書籍では、「Web …

webサイト制作の勉強｜2024年5月クラス用ブログ•2ヶ月前

mixitup を使ってフィルタリング機能を実装

多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。 さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダルウィンドウ「Fancybox」のCDN 今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。 fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery…

webサイト制作の復習 --2024年5月--•2ヶ月前

mixitup を使ってフィルタリング機能を実装

多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダルウィンドウ「Fancybox」のCDN 今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.f…

コミュ障だから明日が僕らをよんだって返事もろくにしなかった•3ヶ月前

Lityをさわる

おさわりはからだにいいのだ（？） はい、おはようございます。僕です。今日もどうでもいいことを書いていきます。ということでね。今更こうしたプラグインを使ってみることにします。 sorgalla.com Lityは超軽量でアクセスしやすく、レスポンシブなライトボックスプラグインで、画像、iframe、インラインコンテンツに対応しています。 こういったjQueryプラグイン。実際に使ってみるとこんな感じ。 JSの方には特にdata-lity属性つけてやるだけでポップアップしてくれるみたいです。余計なことを書かないからもしかしたら今でも便利かもしれない……。ちなみにGitHubはここです。 GitHu…

シャラントンの小部屋•3ヶ月前

マスクのCSS

fc2にあるテンプレートをいじって、カーソルを乗せると別の画像が現れるメニューにしてみました。 元にしたのはこのテンプレートです。 マスクの設定のCSS部分 position: absolute; 起点は画面左上。そこからどれだけ離れるかを、top: 50px; のように指定できる。 opacity: 0だと完全に透明、1だと完全に不透明、0.5のような中間値だと半透明。 background-color: rgbaのaで透明度を指定。0だと0%、1だと100% 0にすると変化なし 1にすると真っ黒になる。 -webkit-transition: 変化させるプロパティと変化のさせ方を指定する。…

かたつむり投資。AIWealthBuilder diary•3ヶ月前

今年テスラが買ったLiDARはどこにあるのか？

今年テスラは、2100台のLiDARを買ったらしい。 車の屋根に4で割ると、500台分である。 で、街中で撮影されたとされる、テスラのテストカーの写真は、 ぜんぶ、旧型のハイドラである。 購入タイミングとしては、ボルボEX90についている新型のはずなのに、その写真はどこにもない。 つまり、テスラは、今年購入したLiDARは、手元に持っていて、まだ走らせるのに使っていないことになる。500台分も。 これを、普通に考えれば、ロボタクシーで屋根に積むために購入したと考えるだろう。 なぜか、イーロンは、ずっとLiDAR不要だといいつづけているが、 では、新型LiDARは、どこにいったのか？と誰も答えら…

Toilを無くして徒然なるままに日暮し硯に向かひたい•3ヶ月前

LangChainでURLからWebページの中身を読み込む方法

langchain.connpass.com 今度、Langchain Meetup Tokyoで喋るので、「LangChainでURLからWebページの中身を読み込む方法」を準備中 github.com ↑ソースコードを上げておきました。 npx ts-node cheerioWebBaseLoader.ts https://shu-kob.hateblo.jp/entry/2024/08/29/234143 という形で実行し、以下の結果が得られます。 newDocuments: [ Document { pageContent: 'Toilを無くして徒然なるままに日暮し硯に向かひたい 読者…

WEBサイト制作の勉強•3ヶ月前

レストランサイトの予約ページ

入力画面 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト|予約ページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <l…

qyresearch•3ヶ月前

世界のデジタルアウトオブホーム市場調査：産業動向、シェア、市場規模、予測の分析レポート2024

2024年8月30日に、QYResearchは「デジタルアウトオブホーム―グローバル市場シェアとランキング、全体の売上と需要予測、2024～2030」の調査資料を発行しました。本報告書は、デジタルアウトオブホームの世界市場を分析し、主要企業の売上、動向、市場規模、市場シェア、ランキングなどを掲載しています。また、地域別、国別、製品タイプ別、用途別に市場を分析しています。2019-2030年の売上に基づいて、デジタルアウトオブホームの市場規模を推計と予測しています。企業が事業成長戦略を策定し、競争環境を評価し、市場ポジションを分析し、デジタルアウトオブホーム関連情報に基づくビジネス上の意思決定を…