カラーミーショップをカスタマイズすると、JSが外部から呼び出せないジレンマに陥ることがありますよね。 (新しく追加されたFTPオプションなるものを使えば、外部JSを呼び出せるようになるのかな？わかんないけど) でも、最近ECサイトで良く見かける、 詳細画面でトップ画像以外のサムネイルにマウスオーバーすると、トップ画像の場所にサムネイルのでかい画像に差し変わる。という効果を入れてみたくないですか？ 新規ページで画像だけが開くのも昔チックだし・・・ で、HTML内に埋め込める短いJSソースで、カラーミーの独自タグを生かした方法を見つけました。 入れ込むJavascript <script type='text/javascript'> <!-- function largeImg(sImg) { document.images['imgBox'].src=sImg; } --> </sc

Tweet TweetGoogleアナリティクスは、無料で使える高機能なアクセス解析ツールです。 サイト内のページであれば、[コンテンツ] – [サイトコンテンツ] -[すべてのページ] から、各ページがどれくらい閲覧されているか確認することができます。 しかしながら、外部リンクの閲覧数は通常のレポートでは見ることができません。 アフィリエイトなどをやっていて、バナーリンクなどのクリック数を調べたいこともあるかと思います。そういった外部リンクもちょこっとコードを加えてあげると、Googleアナリティクスでクリック数をカウントすることができるようになります。 外部リンクをカウントするための手順 1. まずはGoogleアナリティクスのトラッキングコードをソースに追記します。 2. クリック数をカウントしたいリンクを以下のように変更します。 <a href="http://example.c

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 の横方向の出現や隠す動作は、width に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の width: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。

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

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

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

アプリのサポートサイトを作って、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

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