• 締切済み

pinterest風のページのjsのプラグイン化

こんばんは、いつもお世話になっています。 結局のところ私はpinterest風のグリッドレイアウトが作りたいのですが、JavaScriptのプラグイン化の方法が解りません。 https://dev.classmethod.jp/articles/html5-css3-jquerystudy-12-pinterestgrid/このサイトを参考にしたのですが、 宜しければご教示お願いします。 いつもすみません・・・。

みんなの回答

  • celtis
  • ベストアンサー率70% (2271/3210)
回答No.1

直接の回答ではありませんが、Pinterest風デザインの実現ならMagic Gridを利用したほうが楽だと思います。 下記サイトにわかりやすい解説がありました。 https://on-ze.com/archives/7644

JackTheRipper99
質問者

お礼

回答ありがとうございます。 何か出来ませんね、いい方法ありませんか？ pinterest風グリッドレイアウトにしてから、下から上へふわっと表示するような感じにしたいのですが、上手くいく方法はないでしょうか？ 宜しくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 画像をアニメーションで表示するのに

    画像をスクロールした際にアニメーションで表示させるのに、スクロールで画像表示用のjavascriptで大半のdivやli等のクラス属性を使ってしまってしたい事が全部できないのですがどうしたら良いでしょうか？ したい事： １画像表示 ２pinterest風グリッドレイアウトにする ３画像の位置を整える ４スクロールした際に画像をふわっと出現させる。 これらを全部できる様にするにはどのような記述が必要でしょうか ご教示お願いします。

    • ベストアンサー
    • CSS
  • GO LIVE5.0でレイアウトグリッドの背景のみに写真を配置したい

    お世話になります。 GO LIVE5.0でＨＰを作成しているのですが 指定のレイアウトグリッドの背景にうすい写真をひいて その上でそのレイアウトグリッドを作業したいのですが それってどうやったらできるでしょう？ ちなみに指定のレイアウトグリッド以外はCSSで小さな画像を敷き詰めたいと思っています。 独学で作成していますのでまだよく分からないところが多々あって ご迷惑おかけしますがよろしくお願いします。

  • Queryのプラグイン（jAni）を 全画面表示

    背景画像をアニメーションさせるjQueryのプラグイン（jAni）を、 全画面表示にさせる方法を教えてください。 全くのjQuery初心者で、本当に困っています。 助けてください。お願いいたします。 jQueryのプラグイン (jAni)を導入したのですが、 全画面で表示させなければならなくなってしまい どうしようもなく困っています。 ＵＲＬ 背景画像をアニメーションさせるjQueryのプラグイン -jAni http://coliss.com/articles/build-websites/operation/javascript/jque... ソースの19行目と２０行目で表示の大きさを決めているところまでは分かりましたが 何をどう変えればいいか、行詰ってしまいました。 宜しくお願いいします。 １８行目 function _build(){ １９行目 element.width(settings.frameWidth); ２０行目 element.height(settings.frameHeight); ２１行目 element.css('background-position', '0 0'); ２２行目 };

  • wordpressでlightbox系のプラグイン

    いつもお世話になっております。 オリジナルで今テーマを作り構築し終わったのでlightbox系のプラグインをいれようとした所、 どのlightbox系のプラグインを入れても、 【このプラグインを有効化する際に、224文字分の予期しない出力が生成されました。もし “headers already sent” エラーメッセージ、配信フィードの問題などが発生する場合は、プラグインを無効化または削除してください。】 と出てしまい、lightboxの効果が全く反映されません。 header内は下記です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href=”css/style.css" rel="stylesheet" type="text/css" /> <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 画像のプリロード $(function(){ $("a img").each(function(){ if(String($(this).attr("src")).match(/_off\.(.*)$/)){ var img = new Image(); img.src = String($(this).attr("src")).replace(/_off\.(.*)$/,"_on.$1"); } }); }); // 画像のロールオーバー $(function(){ $('a img').hover(function(){ $(this).attr('src',$(this).attr('src').replace('_off','_on')); },function(){ $(this).attr('src',$(this).attr('src').replace('_on','_off')); }); }); </script> </head> 何が原因なのでしょうか？？

    • ベストアンサー
    • CSS
  • ECサイトのような商品紹介ページの作り方

    よろしくお願いします。 http://www.uniqlo.com/jp/store/goods/258575 上記のようなページを作ろうと思っているのです。 色違いの商品のボタンにマウスをホバー、もしくはクリックすると商品画像の色違いの商品が表示される仕組みを作りたいのですが、参考サイトを見つけられずに困っています。 wordpressで制作中なのですが、このようなプラグインがあると助かります。 プラグインで解決しないのであれば、javascript,jQueryを使用する必要があるのでしょうか？ javascript,jQueryはあまりできないのですが、 解りやすい解説サイトのようなものがあると嬉しいです。 よろしくお願いします。

  • wordpressの個別ページに外部ファイルを‥

    wordpressの個別ページに外部javascriptファイルを使用して動画を貼り付けたいのですが、いまいち方法がわかりません。Custom CSS and JavaScriptプラグインを有効化して、カスタムフィールドに名前と値（http://～）をいれたのですがブログ記事に動画がつきません。何か別にphpファイルを用意してスクリプトを記述しないといけないのでしょうか？ ちなみに貼り付けたいスクリプトはhttp://www.schick-jp.com/tvcmのサイトにあるものです。

    • ベストアンサー
    • PHP
  • Aviutlで、L-SMASHのプラグイン

    お世話になります。 Aviutlの勉強を始めました。 動画ファイルを読み込もうとしたところ、読み込めない。 調べたところ L-SMASHのプラグインというプラグインを入れるんだそうで、挑戦してみました。 http://zerorabo.com/momiji/aviutl/476/ http://aviutl.info/l-smash-works/ 上記２つのサイトを参考に、プラグインを入れる作業をしてみました。 L-SMASHをダウンロードして ・lwcolor.auc ・lwdumper.auf ・lwinput.aui ・lwmuxer.auf 合計4つのファイルを、 Aviutlのアプリケーションが入っているフォルダの中に移動してください。 (前回ダウンロードした、aviutl100の中に入れてください。) とのことなので、それをしました。 ところが 「入力プラグインの優先度の設定」 （ファイル→環境設定→入力プラグインの優先度の設定）のところに 「L-SMASH　ｗｏｒｋｓ　Ｆｉｌｅ　Ｒｅａｄｅｒ」があるはずなのに、ありません。 もしかしたらプラグインの導入ができていないのか・・・ Ｍｏｖファイル（動画ファイル）を読み込めるようにしたいのです。 どなたかご教示くださいませんか？

  • WPのプラグインPhotospaceについて

    Wordpress勉強中です。 ギャラリー系のプラグインを探していたところ、Photospaceというプラグインにたどり着き、下記の二つのサイトを参考にしながら設置してみました。 http://isowanted.blogspot.jp/2013/03/wordpressphotospace.html http://thriveweb.com.au/the-lab/wordpress-gallery-plugin-photospace-2/ 前述のサイトで、デフォルト設定だとサムネイルが左側に設置されるとありますが、今作っているサイトでは上部に水平に表示されています。 サムネイルを右側に置きたかったため、後述のサイトにある通りstyle.css に以下の記述を追加しましたが、反映されません。 -------------------------------------------------------------------------- .photospace .thumnail_col { float:right !important; } .photospace .gal_content { float:left !important; } .photospace ul.thumbs li { margin-left:10px; margin-right:0 !important; } .photospace .thumnail_col a.pageLink { margin-left:10px; margin-right:0; } -------------------------------------------------------------------------- Photospaceのgallery.cssでも試してみたのですが、反映されませんでした。 どこに問題があるのでしょうか？ バージョンは、WordPress 3.6.1 無料テンプレートをカスタマイズして作成しております。

  • wordpressの実装について。ホームページ作成

    wordpressでの実装について。ホームページ作成です。 wordpressを利用してビジネスサイトを作成したいと思っています。 手順として、先にhtmlとcssでホームページを作成してからwordpressへ置き換えた方が、 wordpress利用でエラーが出た時など、htmlやcssが原因でないことがハッキリするとあったため、 先にhtmlやcss、javascriptでホームページを作成している段階です。 そこで疑問なのですが、 今、現段階でjavascript(jQuery含む)も利用して少しずつ実装をしています。 次にやりたいことで以下の処理があります。 ・記事全てを「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧として、 新しい記事が１ページ目の先頭にくるようような処理です。参考サイトのURL[ttp://thehub.jp/category/news] このような処理をjavascriptだけで実現させるのは大変そうですし、 仮にjavascriptで実装できてもwordpressを利用するときにうまく置き換えられるか、 またwordpressの仕様上、結局は外さないといけなくなることを懸念しています。 そこで今の段階で以下を質問しておきたいのです。 wordpressの既存設定やプラグインでこのように 「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧を 作成するようなことはできるものでしょうか？ またそういった既存設定やプラグインが無い場合、複雑なjavascriptを利用しても、 うまくwordpressに置き換えられるものでしょうか？ 経験や知識のある方にご教授願いたいです。よろしくお願い致します。

  • wordpressの実装について。ホームページ作成

    wordpressでの実装について。ホームページ作成です。 wordpressを利用してビジネスサイトを作成したいと思っています。 手順として、先にhtmlとcssでホームページを作成してからwordpressへ置き換えた方が、 wordpress利用でエラーが出た時など、htmlやcssが原因でないことがハッキリするとあったため、 先にhtmlやcss、javascriptでホームページを作成している段階です。 そこで疑問なのですが、 今、現段階でjavascript(jQuery含む)も利用して少しずつ実装をしています。 次にやりたいことで以下の処理があります。 ・記事全てを「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧として、 新しい記事が１ページ目の先頭にくるようような処理です。参考サイトのURL[ttp://thehub.jp/category/news] このような処理をjavascriptだけで実現させるのは大変そうですし、 仮にjavascriptで実装できてもwordpressを利用するときにうまく置き換えられるか、 またwordpressの仕様上、結局は外さないといけなくなることを懸念しています。 そこで今の段階で以下を質問しておきたいのです。 wordpressの既存設定やプラグインでこのように 「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧を 作成するようなことはできるものでしょうか？ またそういった既存設定やプラグインが無い場合、複雑なjavascriptを利用しても、 うまくwordpressに置き換えられるものでしょうか？ 経験や知識のある方にご教授願いたいです。よろしくお願い致します。。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する