BGS-WORKS Blog » [Cording] カラーミーで、サムネイルマウスオーバーで拡大画像の効果をつける
カラーミーショップをカスタマイズすると、JSが外部から呼び出せないジレンマに陥ることがありますよね。 (新しく追加されたFTPオプションなるものを使えば、外部JSを呼び出せるようになるのかな？わかんないけど) でも、最近ECサイトで良く見かける、 詳細画面でトップ画像以外のサムネイルにマウスオーバーすると、トップ画像の場所にサムネイルのでかい画像に差し変わる。という効果を入れてみたくないですか？ 新規ページで画像だけが開くのも昔チックだし・・・ で、HTML内に埋め込める短いJSソースで、カラーミーの独自タグを生かした方法を見つけました。 入れ込むJavascript <script type='text/javascript'> <!-- function largeImg(sImg) { document.images['imgBox'].src=sImg; } --> </sc
『タッチイベントを使ったスマートフォンページ制作』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ブロググループでフロントエンドの開発を担当している泉と申します。 クリエイティブアカデミー※1を経て、2012年5月に中途入社いたしました。 クリエイティブアカデミー レポート 仕様について１、フリックを使った画像の切り替え 今までは、現在見ている画像から次（前）の画像を見るためには、リンクをタップしてもらって該当の画像ページに遷移させる必要がありました。 しかし今回はユーザにストレスを与えないために、ページ遷移しなくても画像が切り替わるように実装します。 ２、表示されている画像のピンチイン／アウト（拡大／縮小） タップされた時のイベン
Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介 | 独学Webデザイナーの覚書
最新の記事 レスポンシブWebデザインでリニューアルいたしました 2016年12月27日その他 「独学Webデザイナーの覚書」をリニューアルいたしました。ありがたいことにかなりの間更新が滞っているサイトではありますが、毎日多くのユーザーに閲覧していただきたき大変感謝しております。 今回のリニューアルについて本記事にまとめさせていただきました。 続きを読む 設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 2014年11月15日CSS フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 続きを読む 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 2013年7月31日jQuery 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 続きを読む 超便利
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
jQuery の animate の横方向の出現や隠す動作
jQuery の animate の横方向の出現や隠す動作は、width に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の width: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。
jacksbox.de | Software-Developer
Proficient in Python, Javascript/Typescript and NodeJs Working on state-of-the-art Backend- and Frontend Services Experience working with AI and LLMs Experience in modern development environments like AWS ,GCP and Azure Configuration of Continuous Integration and working in a TTD and DDD fashion Building, planning and managing Microservice Architectures in cloud environments Writing performant, re
Easy Slider 17 Numeric Navigation jQuery Slider | CSS Globe
posted on:August 4, 2009 Easy Slider 17 Numeric Navigation jQuery Slider I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don’t have the time to answer all of your emails. I wish I do. What I am presenting you today is an easySli
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Sa
iPhone用サイトの画像 Retina対応、回転対応 - 袖触れ合うも多少の縁
アプリのサポートサイトを作って、Retina対応が気になったので調べました。 今回作ったサイトはこんな感じ hiranodept apps 以前はCSSで切り替えをやっていたのですが、JSの方が楽ですね。 img要素をとってきて、Retinaの場合はプレフィックス(@2x)を付けるのが簡単かなと思いました。 以下が元ネタです。 Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2 <img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /> srcにはダミー画像のパスを入れておきます。 data-originalに画像のパスを入れておきます。 こうすることで、無駄な画像を読み込まなくて済むようです。 $(function(){ $('img').eac
jQuery で複数の要素のアニメーションが全て終わったら何かを実行する - ダーシマ・ヱンヂニヤリング
jQuery でたくさんの要素をグリグリ動かしたいときに、完了時刻の違う複数の要素のアニメーションが両方終わった時に何かを実行する、というような処理をしたいと思うことがある。 完了時刻が遅い方のコールバックに処理を書けば、望みのことは出来る。ただ、このようにして書かれたコードは変更に弱いし、見ただけで何をしたいコードなのかがパッと見わからなくなる。 アニメーション完了後に何かをするといえば、慣例的に以下のように書くことがポピュラーである。 $('.target') .animate({ top: '+=100px' }, 500, 'swing', function () { // アニメーション完了後に実行される alert('done!'); }); jQuery 1.6 から、 animate や fadeOut といった処理がキューに入る系のメソッドでは、キューがすべて空っぽになっ
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
jQueryでページ上の座標（X座標／Y座標）を取得する方法｜BLACKFLAG
Webページ上でカーソル位置やクリックされた位置によって ポップアップを出したりモーダル位置を調整したりツールチップを出したり いろいろと処理を加えることがあると思います。 そんな際のページ上のポイント位置の座標（X座標／Y座標）を取得して 位置を調整する処理方法を簡単に紹介してみたいと思います。 jQueryでページ上の座標（X座標／Y座標）を取得する方法【ページ全体の場合】 ページ上のX座標・Y座標を取得するには —————————– X座標 = e.pageX Y座標 = e.pageY —————————– を使って値を取得することができます。 各座標の値を取得するサンプルとして ページ上のクリックされた位置のX座標／Y座標を取得してみると。 ページ上のクリックされたポイントのX座標／Y座標を取得（別枠で表示されます）※別枠で表示される画面内をクリックしてみてください。 クリックさ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ModalOverlay
JQuery Cycle Plugin - 'Wipe' Demo
朝日広告社 | ASAKO | Asahi Advertising Inc.