社員ブログ
HOME  社員ブログ

アーカイブ

‘JavaScript’ カテゴリ

JavaScriptで画像ギャラリーを簡単に実装できる『PhotoSwipe』がすごい!

2015年02月20日 14時09分09秒

こんにちは、コブラです。

 

『PhotoSwipe』はスマホでもPCでも画像をクールに魅せられちゃうプラグインです!

公式サイトにはドキュメントもデモも揃ってます。

動作はそちらでご確認を。

 

さて、そんなPhotoSwipeを実装するにあたって、

ギャラリーを開いたとき、閉じたときに実行したい処理があったのでその実装方法を調べました。

 

この記事を参考に実装しました。

 


<!-- PhotoSwipe -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/photoswipe.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/jquery.page-scroller.js"></script>
<script src="js/klass.min.js"></script>
<script src="js/code.photoswipe.jquery-3.0.5.min.js"></script>

$(document).ready(function ()
 {
     var myPhotoSwipe = $("#hoge a").photoSwipe({ enableMouseWheel: true , enableKeyboard: true });
     $("#hoge a").on("click", function(event){
        setTimeout(function(){
            $("#hoge a").removeClass("ui-btn-active");
        }, 1000);
     });

    // ギャラリーを開いたときに実行される
    myPhotoSwipe.addEventHandler("PhotoSwipeOnShow", function(e){ 
    });

    // ギャラリーが閉じるときに実行される
    myPhotoSwipe.addEventHandler("PhotoSwipeOnHide", function(e){ 
    });
}

 

<div id="hoge">
    <a href="hoge1.jpg" rel="external"><img src="hoge1.jpg" alt="hoge1" /></a>
    <a href="hoge2.jpg" rel="external"><img src="hoge2.jpg" alt="hoge2" /></a>
    <a href="hoge3.jpg" rel="external"><img src="hoge3.jpg" alt="hoge3" /></a>
</div>

 

おそらくPhotoSwipeには不要なjsも紛れ込んでいると思いますが…

cssやjsで使用する画像も忘れずにアップしてくださいね!

これ、あちこちで活用できそうなのでしっかり覚えておきたいと思います。

JavaScript, 社員:cobra

JavaScriptの関数オブジェクトプロパティprototypeの簡単なご説明

2014年04月30日 22時27分34秒

kijitoranekoです。


こんにちは。

ということでprototypeによる継承について、簡単に整理します。
簡単ではありますが、イメージいただけるのでは無いでしょうか。

結構考えて書いたつもりです。
わからない部分はご質問願います。



/////////ユーザ定義でコンストラクタ関数定義
        function MyObj(){}
        var obj1= new MyObj();

        try{
            obj1.echo("obj1のecho");
        } catch(e) {
            console.log("obj1のechoがない");
        }

        //prototypeプロパティにechoメソッドを追加
        MyObj.prototype.echo = function(str){console.log(str);}
        var obj2 = new MyObj();
        try{
            obj2.echo("obj2のecho");
        } catch(e) {
            console.log("obj2のechoがない");
        }

        

//////////String(組み込みコンストラクタ関数)について
        var str = new String();
        try{
            str.echo("strのecho");
        } catch(e) {
            console.log("strのechoがない");
        }
        //Stringのプロトタイプにechoメソッド追加
        String.prototype.echo = function(str){console.log(str);};
        var hogeStr = new String("");
        hogeStr.echo("hogeStrのecho");

        //こちらも実質Stringにechoが追加されてから"文字列"はインスタンス化されているのでOK
        "文字列".echo("文字列のecho");


結果
“obj1のechoがない”
“obj2のecho”
“strのechoがない”
“hogeStrのecho”
“文字列のecho”


JavaScript, 社員:kijitoraneko

Yeomanでgenerator-angularで

2014年03月26日 22時07分48秒

 

kijitoranekoです。

こんにちは。

 

grunt serveして下記が表示されたので、とりあえずよいのですが。

2014-03-26 21.58.30

 

今回はこちらにハマりました。

https://github.com/yeoman/generator-angular/issues/275

 

We don’t support unstable node versions. If you want to use yo, you unfortunately have to downgrade to v0.10.

 

日本人だから英語が得意でない私でも流石にこれくらいはわかります。

義務教育なめんなよ。

というかv0.11ってまだunstableなの?

対応してるの?私のミスなの?

 

nodeをv0.10.26に落として、やり直したら大丈夫でした。

なので、これでいいです。

 

そして、咳が続いております。

ではまた。

JavaScript, 社員:kijitoraneko