動画やWebページをクリックã§è¡¨ç¤ºã™ã‚‹Lightboxç³»javascript「Mediaboxã€
ホームページã§ã€YouTubeã€WMPã€SWFã€MOVã€WMVãªã©ã®ã‚µãƒ ãƒã‚¤ãƒ«ç”»åƒãƒ»æ–‡å—をクリックã—ã¦ã€ ãã®ãƒšãƒ¼ã‚¸å†…ã§å‹•ç”»ãªã©ã‚’é–‹ã方法 ï¼»Mediabox] Lightbox for Media Mediaboxã¯ã€lightboxç³»ã®å‹•ç”»ãƒ¡ãƒ‡ã‚£ã‚¢ãªã©ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’å†ç”Ÿã™ã‚‹Javascriptã§ã‚る。 JSフレームワークã«MooToolsを使用ã—ã¦ã„る。åŒã˜ã‚ˆã†ãªJavascriptã«ã€ç”»åƒã‚‚å‹•ç”»ãªã©ã‚‚å†ç”Ÿã§ãã‚‹ShadowboxãŒã‚る。 Mediabox サンプル
メディアファイルã®Webページ埋ã‚è¾¼ã¿ï½œjQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用ã—ãŸã€Webページã«Flashオブジェクトを埋ã‚込むãŸã‚ã®JavaScriptツール。 flashembed('myContainer', 'myflash.swf')ã®ã‚ˆã†ã«è¨˜è¿°ã™ã‚‹ã ã‘ã§ã€Webページã«Flashオブジェクトを簡å˜ã«åŸ‹ã‚込むã“ã¨ãŒã§ãã¾ã™ã€‚ å˜ä¸€ã‚ã‚‹ã„ã¯è¤‡æ•°ã®FlashムービーをWebページã«åŸ‹ã‚込むã ã‘ã§ãªãã€ã‚¯ãƒªãƒƒã‚¯ã—ãŸæ™‚ã«å†ç”ŸãŒå§‹ã¾ã‚‹ã‚ˆã†ã«æŒ‡å®šã—ãŸã‚Šã€Flash Playerã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚’å–å¾—ã—ã¦ã€æŒ‡å®šã—ãŸãƒãƒ¼ã‚¸ãƒ§ãƒ³ä»¥ä¸‹ã®å ´åˆã«æœ€æ–°ç‰ˆã®Flash Playerã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã‚’表示ã™ã‚‹ãªã©ã®ã‚µãƒ³ãƒ—ルも掲載ã•ã‚Œã¦ã„ã¾ã™ã€‚ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
jQueryプラグインã®ãƒ™ã‚¹ãƒˆãƒˆãƒ¬ãƒ³ãƒ‰ç·ã¾ã¨ã‚2010*ホームページを作る人ã®ãƒã‚¿å¸³
ã‚‚ã¯ã‚„ã“ã®æ¥ç•Œã§ã¯ã‹ãªã‚Šæµ¸é€ã—ã¤ã¤ã‚ã‚‹jQuery。 今回ã¯ãã‚“ãªjQueryã«ã‚¹ãƒãƒƒãƒˆã‚’当ã¦ã€æœ¬å¹´åº¦ç´¹ä»‹ã•ã‚ŒãŸä¸ã§ã‚‚ã€ãƒ›ãƒƒãƒˆãªãƒˆãƒ¬ãƒ³ãƒ‰ãƒ—ラグインをã”紹介ã—ã¾ã™ã€‚ ※プラグインã¤ã‹ã£ã¦ãªã„ã®ã‚‚ã‚ã‚Šã¾ã™ã€‚ １）3D表示プラグイン サンプルデモ 今年ã®ãƒˆãƒ¬ãƒ³ãƒ‰ã¨è¨€ãˆã°3D。 ã¨ã„ã†ã‚ã‘ã§ã“ã¡ã‚‰ã€‚ã¾ãšã¯ã‚µãƒ³ãƒ—ルデモを確èªã€‚ 触ã£ã¦ã‚ã‹ã‚‹é€šã‚Šã§ã™ãŒã€2æžšã®ç”»åƒãŒ3D表示ã•ã‚Œã¾ã™ã€‚ 呼ã³å‡ºã™ $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
個人的ã«æ°—ã«å…¥ã£ã¦ã‚‹10ã®Lightboxç³»jQueryプラグインåŠã³ã€ãã®ç‰¹å¾´ã¾ã¨ã‚ - ã‹ã¡ã³ã¨.net
個人的ã«æ°—ã«å…¥ã£ã¦ã‚ˆã使ã£ã¦ã„ã‚‹ã€åˆã¯ ã„ã¤ã‹å½¹ã«ç«‹ã¡ãã†ã€ã„ãšã‚Œä½¿ã„ãŸã„的㪠Lightbox風ã«æ‹¡å¤§å®Ÿè£…出æ¥ã‚‹jQueryプラグ インã®ã¾ã¨ã‚ã§ã™ã€‚使ã†ã¨ãã«ã„ã¡ã„ã¡å¼•ã£ 張り出ã—ã¦ã„ã‚‹ã®ãŒé¢å€’ãªã®ã§ã¾ã¨ã‚ã«ã—㦠ã¤ã„ã§ã«ã‚·ã‚§ã‚¢ã—よã†ã¨æ€ã£ã¦è¨˜äº‹ã«ã—ã¾ã™ã€‚ オーソドックスãªã‚‚ã®ã‹ã‚‰ã€ã‚„や特徴的ãªã‚‚ã®ã€Twitterã§ã€Œã“ã‚“ãªã®ãªã„？ã€ã£ã¦èžã‹ã‚Œã¦æŽ¢ã—ãŸã‚‚ã®ãªã©10個厳é¸ã§ã™ã€‚特徴も一緒ã«ãƒ¡ãƒ¢ã—ã¦ãŠãã¾ã™ã€‚ ãªãŠã€ç”»åƒã‚’使ã†jQueryプラグインã«ã”興味ãŒæœ‰ã‚‹ã‚ˆã†ã§ã—ãŸã‚‰ã€ä»¥å‰æ›¸ã„ãŸç”»åƒã‚’使ã£ãŸã„ã‚ã„ã‚ãªjQueryプラグイン224個ã¾ã¨ã‚ã‚‚å‚考ã«ã—ã¦é ‚ã‘ã‚‹ã‹ã¨æ€ã„ã¾ã™ã€‚ colorbox 一番よã使ã£ã¦ã„ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。MITライセンスã§ã€ã‚°ãƒ«ãƒ¼ãƒ—化⇒スライドもå¯èƒ½ã€‚ã¾ãŸã€iPhoneã€iPadã§ã‚‚å‹•ã„ã¦è¡¨ç¤ºã‚‚å´©ã‚Œã¾ã›ã‚“。エフェクトも変更å¯èƒ½ã§ã€Youtubeã‚„Iframeã€Flas
ç”»åƒã‚’使ã£ãŸã„ã‚ã„ã‚ãªjQueryプラグイン224個ã¾ã¨ã‚ - ã‹ã¡ã³ã¨.net
ç”»åƒã«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’ã‹ã‘ã¦æ‹¡å¤§è¡¨ç¤ºã—ãŸã‚Šã€ã‚¹ãƒ©ã‚¤ãƒ‰ã‚’作ã£ãŸã‚Šã€ãƒ„ールãƒãƒƒãƒ—ã§è¡¨ç¤ºã—ãŸã‚Šã€ã¨ã„ã†ã‚ˆã†ãªç”»åƒã‚’使用ã—ãŸjQueryプラグインãŒæ²¢å±±ã‚ã‚‹ã®ã¨ã€æŽ¢ã—ã¦ã‚‹æ–¹ãŒç›´ãã«è¦‹ã¤ã‘られるよã†ã«ã€ã¨ã„ã†äº‹ã§ãƒªãƒ³ã‚¯é›†ã‚’作りã¾ã—ãŸã€‚ ã¨ã„ã†è¨³ã§ã€é›†ã¾ã£ã¦ã„ã‚‹jQueryã®ãƒ—ラグインã®å…±é€šç‚¹ã¯ç”»åƒã‚’使ã£ã¦ã„ã‚‹ã€ã¨ã„ã†äº‹ã ã‘ã§ã™ã€‚一貫性無ã„ã¨ã„ãˆã°ç„¡ã„ã§ã™ãŒã€å€‹äººçš„ã«ã‚‚å¿…è¦ã¨ã™ã‚‹äº‹ãŒå¤šã„ã®ã§è‡ªåˆ†ç”¨ã®ãƒ¡ãƒ¢ã‚‚å…¼ãã¦ã‚·ã‚§ã‚¢ã€‚ 日本語 English çµæ§‹ã‚«ãƒ†ã‚´ãƒªåˆ†ã‘ã¯ã„ã„åŠ æ¸›ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ã®ã§ã‚ã—ã‹ã‚‰ãšã”了承下ã•ã„。画åƒã˜ã‚ƒãªãã¦ã‚‚ã„ã„ã‚“ã˜ã‚ƒãƒ»ãƒ»ã¿ãŸã„ã®ã‚‚ã‚ã‚Šã¾ã™ãŒã€ãƒ‡ãƒ¢ã§ç”»åƒã‚’使ã£ã¦ã‚‹ã€ç”»åƒã¨ç›¸æ€§ãŒè‰¯ã•ãã†ã€ã¿ãŸã„ãªã‚‚ã®ã¯åŸºæœ¬çš„ã«æŽ²è¼‰ã—ã¦ã„ã¾ã™ã€‚ リンクã«ãƒžã‚¦ã‚¹ä¹—ã›ã‚Œã°ã‚ャプãƒãƒ£ãŒå‡ºã¾ã™ã€‚ Lightbox Lightbox風ã«ç”»åƒã‚’表ç¾ã§ãã‚‹jQueryã„ã‚ã„ã‚ Lightbox2 / ベーシックãªã‚¿ã‚¤ãƒ—。
ç”»é¢ã„ã£ã±ã„ã®èƒŒæ™¯ç”»åƒã‚’スライドショウã™ã‚‹jQueryプラグイン
2010å¹´4月10æ—¥ ç”»é¢ã‚µã‚¤ã‚ºã«ãƒ•ã‚£ãƒƒãƒˆã—ã¦ä¼¸ç¸®ã™ã‚‹èƒŒæ™¯ç”»åƒã‚’ã€ã‚¹ãƒ©ã‚¤ãƒ‰ã‚·ãƒ§ã‚¦ã™ã‚‹jQueryプラグインã®ç´¹ä»‹ã€‚ フルFlashサイトãªã©ã§è¦‹ã‹ã‘ã‚‹ã€ç”»é¢ã‚µã‚¤ã‚ºã«åˆã‚ã›ã¦ç”»é¢ã„ã£ã±ã„ã«ç”»åƒãŒè¡¨ç¤ºã•ã‚Œã‚‹ã‚¢ãƒ¬ã€‚ãã‚Œã«ã‚¹ãƒ©ã‚¤ãƒ‰ã‚·ãƒ§ã‚¦æ©Ÿèƒ½ãŒä»˜ã„ãŸjQueryプラグインをã€è‡ªåˆ†ã®ã‚µã‚¤ãƒˆã§ä½¿ã£ã¦ã¿ã¾ã—ãŸã€‚ 動作サンプル www.daichifive.com 自分ã®ã‚µã‚¤ãƒˆã§ä½¿ã£ã¦ã¿ã¾ã—ãŸã€‚ãªã‚“ã‹ã€ã„ã„カンジã§ã—ょ？ã¡ãªã¿ã«ã€ä½¿ç”¨ã—ã¦ã„る写真ã¯ã€è¶³æˆã•ã‚“ã§ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ã¾ã—ãŸã€‚ 追記 上記ã§ç´¹ä»‹ã—ã¦ã„る僕ã®ã‚µã‚¤ãƒˆã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’ã¾ã‚‹ã¾ã‚‹æµç”¨ã™ã‚‹äººãŒå¢—ãˆã¦ã„ã¾ã™ã€‚分ã‹ã‚‰ãªã„ã‹ã‚‰ã¨ã„ã£ã¦ã€CSSファイルやデザインã¾ã§å…¨éƒ¨ãƒ‘クるã®ã¯ã‚„ã‚ã¾ã—ょã†ã€‚head内ã®ã‚¢ã‚¯ã‚»ã‚¹è§£æžç”¨ã‚³ãƒ¼ãƒ‰ã¾ã§ãã®ã¾ã¾ä½¿ã†äººãŒå¤šã„ã®ã‚‚ホント焦る。僕ã®GoogleAnalyticsã®çµæžœã«çŸ¥ã‚‰ãªã„タイトルã®ãƒšãƒ¼ã‚¸ãŒãŸãã•ã‚“å…¥ã£ã¦ãã¦ã¾ã™ã€‚
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://wdr.watanabehiroki.net/2013/02/15/jquery-menu/
MaxImageã®ä¸Šã«ãƒžã‚¹ã‚¯ã‚’ã‹ã‘る方法 - jsdo.it - Share JavaScript, HTML5 and CSS
{{#tags}}- {{label}}
{{/tags}}