#Simplelightbox

[yssyogesh]

This video shows how you can read the stored image files from the directory with PHP and create a photo gallery.

In the example, I am using the Simplelightbox jQuery plugin to create a gallery.

[xwendga]

پرسیار و وەڵامەکانى تاقیکردنەوەکانی / پۆلى دوانزەى ئامادەیی (به‌ PDF)

$(function(){ var $gallery = $('.gallery a').simpleLightbox(); $gallery.on('show.simplelightbox', function(){ console.log('Requested for showing'); }) .on('shown.simplelightbox', function(){ console.log('Shown'); }) .on('close.simplelightbox', function(){ console.log('Requested for closing'); }) .on('closed.simplelightbox', function(){ console.log('Closed'); }) .on('change.simplelightbox', function(){ console.log('Requested for change'); }) .on('next.simplelightbox', function(){ console.log('Requested for next'); }) .on('prev.simplelightbox', function(){ console.log('Requested for prev'); }) .on('nextImageLoaded.simplelightbox', function(){ console.log('Next image loaded'); }) .on('prevImageLoaded.simplelightbox', function(){ console.log('Prev image loaded'); }) .on('changed.simplelightbox', function(){ console.log('Image changed'); }) .on('nextDone.simplelightbox', function(){ console.log('Image changed to next'); }) .on('prevDone.simplelightbox', function(){ console.log('Image changed to prev'); }) .on('error.simplelightbox', function(e){ console.log('No image found, go to the next/prev'); console.log(e); }); });

پرسیار و وەڵامى تاقیکردنەوەى ئینگلیزى / دوانزەى ئامادەیی ـ زانستى و وێژەیی

پرسیار و وەڵامى تاقیکردنەوەى ئینگلیزى دوانزەى ئامادەیی ـ زانستى و وێژەیی.pdf

پرسیار و وەڵامى تاقیکردنەوەى کیمیا ـ پۆلى دوانزەى ئامادەیی

پرسیار و وەڵامى تاقیکردنەوەى کیمیا ـ پۆلى دوانزەى ئامادەیی.pdf

پرسیار و وەڵامى تاقیکردنەوەى ئابوورى ـ پۆلى دوانزەى ئامادەیی

پرسیار و وەڵامى تاقیکردنەوەى ئابوورى ـ پۆلى دوانزەى ئامادەیی.pdf

وەڵامى پرسیارەکانى تاقیکردنەوەى عەرەبی پۆلى ١٢ى ئامادەیی (مەنه��جى نوێ ـ المسلمین و لغیر المسلمین)

وەڵامى پرسیارەکانى تاقیکردنەوەى عەرەبی پۆلى ١٢ى ئامادەیی (مەنهەجى نوێ ـ المسلمین و لغیر المسلمین).pdf

وەڵامى پرسیارەکانى تاقیکردنەوەى عەرەبی پۆلى ١٢ى ئامادەیی (مەنهەجى کۆن ـ المسلمین و لغیر المسلمین)

وەڵامى پرسیارەکانى تاقیکردنەوەى عەرەبی پۆلى ١٢ى ئامادەیی (مەنهەجى کۆن ـ المسلمین و لغیر المسلمین).pdf

پرسیار و وەڵامى تاقیکردنەوەى بیرکارى ـ پۆلى ١٢ى وێژەیی

پرسیار و وەڵامى تاقیکردنەوەى بیرکارى ـ پۆلى ١٢ى وێژەیی.pdf

پرسیار و وەڵامەکانى تاقیکردنەوەى کوردى پۆلى دوانزەى ئامادەیی بۆ هەردوو بەشى زانستى و وێژەیی

پرسیار و وەڵامەکانى تاقیکردنەوەى کوردى پۆلى دوانزەى ئامادەیی بۆ هەردوو بەشى زانستى و وێژەیی.pdf

 پرسیار و وەڵامەکانى تاقیکردنەوەى زیندەزانى / پۆلى دوانزەى ئامادەیی پرسیار و وەڵامەکانی تاقیکردنەوەی زیندەزانی پۆلی دوانزەی زانستی .pdf پرسیار و وەڵامەکانى تاقیکردنەوەى مێژوو/ پۆلى دوانزەى ئامادەیی پرسیار و وەڵامەکانی تاقیکردنەوەی مێژوو پۆلی دوانزەی وێژەیی.pdf

#lightbox .modal-content { display: inline-block; text-align: center; } #lightbox .close { opacity: 1; color: rgb(255, 255, 255); background-color: rgb(25, 25, 25); padding: 5px 8px; border-radius: 30px; border: 2px solid rgb(255, 255, 255); position: absolute; top: -15px; right: -55px; z-index:1032; }

ئەم پەیجە 3583 جار بینراوە

[iskohlmann]

//

[dukablo]

あくまで趣味ですから

どうも休日ウェブデザイナーです(出オチ)

自分のサイトとか、バンドのサイトとか ちょこちょこ作ってたおかげか ついにサイト作ってよ、という声がかかってしまいました。(半笑い) 会社の先輩でした。

昨年の秋口くらいから取り組み始めて 年明け早々に完成しました。 11月頃とかは、やらなきゃと思いつつ手を付けずにいたので 実質2ヶ月くらいで完成したのではないでしょうか。

今回は今後の自分のためにも フィードバック的な感じで軽めに総括してみる。

「何言ってんだ、こいつ」

「日本語でおｋ」

という内容になると思われるので サイトだけ見てくれれば良いです。笑 てゆか先輩の写真がかなりイケてるので、それだけでも見てほしいです。

では。

TOKIO OKADA PHOTOGRAPHY

総括と言っても、別に細かい話とかはしない笑

自分用の備忘録にしたいから つくるのに参考にしたサイトとかソフトとか TIPSとか、そういうのちゃちゃっと紹介しつつ 思い出せるようにしておきたいと思います。

まあ、ざっくり今回のテーマを言っておくと…

・フォトグラファー向けのポートフォリオサイト ・レスポンシブ対応 ・Tumblrでウェブサイト風なデザイン

他になに��るかなあ…？

つくるにあたって、頼んできた先輩にどういう感じにしたいかってことを聞いたんだけど 想像してるモノのモデルケースが身近にあったりして 意外とすんなりデザインが決まった印象。 実際ここが時間かかったりするしね。重要だし。

で、テーマの3点を見直してみると 1と3については自分のサイトでやっていたので ある程度のノウハウはある…つもり。

でもってやっぱりネックになるのは…そう！

レスポンシブ対応！！！

これなにかって言うと PC、タブレット、スマホなど 複数のデバイスで見たときに それぞれに対応・適したデザインにするというもの。 自分のサイト作ったときでさえ 既にスマホ時代到来って感じだったけど スマホ上でちゃんとしたサイトデザインで見れるのって もはや当たり前になってる気がするんですよ。

この辺を枕にしつつ、本題に入ると…

そもそもこの話をフワっとされたときに 最近のサイト開発環境ってのはどうなってんのさって軽くググッた。

そこで見つけたのがこちら。

bootstrap3

所謂CSSフレームワークというもの。 これを見つけて概要とかを読んでみると 案外サクっとできそうなビジョンが見えてきた。 じゃあいっちょやってみっか！ という軽いノリで引き受けちゃいました。 その後およそ2ヶ月にわたる地獄が待っていたのですが それについてはここでは割愛。

俺の場合、ちゃんと基礎からHTML及びCSSなどを勉強しているわけではないので その都度リファレンスとか見たり 試行錯誤を繰り返しまくって、本当にちょっとずつ進んでいくわけです。

そりゃあ時間かかりますわなあ。

余談ですが… 実を言うと、このbootstrap 前回作った正方形のサイトの時に発見していた気がします。 が、その時は全然使いこなせなかった思い出。 今回も使いこなせているかと言うと、そうでもないですが笑

さて、いろいろ進めていくのに参考にしたサイト及びソフトを列挙。

・マンガでなれる？Webデザイナー講座

　　まず最初に見たサイトで、今回のサイト作成の導入部分でめちゃめちゃお世話になりました。本当にありがとうございました。

・Bootstrap3日本語リファレンス

　　件のbootstrap3のリファレンスを日本語に訳してくれたサイト。基本をおさらいする時にちょこっと見たかな。ここ見��実践的なことやってるサイトをいくつも見て、使い方を学ぶって感じです。

・Brackets

　　コードエディター。1つ目のサイトで紹介していて、便利な機能があったので使ってみました。左右2画面に分割できるのがけっこーよかったかも。UIも綺麗で使いやすかった。検索機能とかめっちゃ使った。

・prepress

　　SASStoCSSコンバーター。として使用って感じ。こちらもマンガ〜のサイトでの紹介で。この辺は専門的な話だから割愛。

・Adobe Experience Design CC (Beta)

　　なんだろう。Webサイトとかアプリのデザインシミュレーター的なものだと思われる。みんな大好きAdobe大先生。CCにしてたらベータ版で無料で使えるからやってみると、けっこー面白くてよかった。サイト、アプリをつくるときの草案考える場面で活用。

・Font Awesome

　　Webアイコン。これがフリーなんだからすごい。欲しいやつが良い感じであるのが嬉しい。こういうの使ったサイトはやっぱ綺麗だわ。

・Simplelightbox

　　ポートフォリオサイトではおなじみのLightBoxのためのjs。当初Tumblr内の機能で実装していたが、スマホとかで見た時に「スワイプで次の画像に」ってのができなくて、こちらを導入。やっぱスマホだったらそうやって見るのが「自然」だからね。

・footerFixed.js

　　フッターを最下部に固定するというjs。CSSでやれよと言われそうですが、正直めんどくさくてこれで一発だったので。逃げの一手みたいな話。

・16進数カラーコード・RGB・RGBA変換ツール

　　カラーコード生成サービス的な？笑。CSSで色指定する時に16進数で入れる派で、且つ今回はrgbaを結構使ったので、そこら辺で便利だったかも。

・比率計算機

　　比率の計算をする。サイトを作ってると、とにかくこの比率とたくさん対峙する。けっこー使ったな、これ。

実際その他無数のサイトをタブ30個以上常に開いてやってたわけですが それら全部はさすがに載せられないので まあ、これらに関連した話のトラブルシューティング的なやつを ググってみれば良いのではなかろうか。

あといくつかのサイトのソースコードを覗か���てもらって どうやってるかをけっこー細かく見たりしてた。 これやってる時間が長かったかもしれない。 そこでとっても役に立ったのがGoogle Chromeの機能である 「デベロッパーツール」というもの。 サイトを左側に、ソースコードを右側に出して その場でコードをいじって変化を見れたりする。 自分のサイトの微調整とかでも大活躍。 windowsのF12キーで見れるやつかも。 Chromeデベロッパーツールのすごいところが 各デバイスの挙動もシミュレートして見れるところ。 デバイスの幅もプリセット的なので入ってるし レスポンシブを選べば自由に変えられる。 レスポンシブデザインのサイトをつくるのに、本気で便利。

と…。 こんなところか。 中身があるようでないようなブログですが まあ、ここまで読む人はいないと思うので 本当に備忘録です。

読んでくれた人、ありがとう。

でもって、ここで言うの？って話ですが

ここまでやって これもあくまで趣味のひとつなわけで 暇つぶしのようなものなんです笑

あとWebデザインが好きってのもあるけど。

でもうまくいかないとすぐ発狂したくなるし なんならすんなり行くことのほうが少ないので ほぼほぼ発狂状態。 それでも完成したときの独特の達成感は なかなか味わえるものではないので、 これからもちょこちょこやっていきたいと思います。

[xwendga]

ئاگادارییەک سەبارەت بە قوتابخانەی ئەمەریکی

$(function(){ var $gallery = $('.gallery a').simpleLightbox(); $gallery.on('show.simplelightbox', function(){ console.log('Requested for showing'); }) .on('shown.simplelightbox', function(){ console.log('Shown'); }) .on('close.simplelightbox', function(){ console.log('Requested for closing'); }) .on('closed.simplelightbox', function(){ console.log('Closed'); }) .on('change.simplelightbox', function(){ console.log('Requested for change'); }) .on('next.simplelightbox', function(){ console.log('Requested for next'); }) .on('prev.simplelightbox', function(){ console.log('Requested for prev'); }) .on('nextImageLoaded.simplelightbox', function(){ console.log('Next image loaded'); }) .on('prevImageLoaded.simplelightbox', function(){ console.log('Prev image loaded'); }) .on('changed.simplelightbox', function(){ console.log('Image changed'); }) .on('nextDone.simplelightbox', function(){ console.log('Image changed to next'); }) .on('prevDone.simplelightbox', function(){ console.log('Image changed to prev'); }) .on('error.simplelightbox', function(e){ console.log('No image found, go to the next/prev'); console.log(e); }); });

لە پاش چەندین هەوڵی بنیاتنەرانە بۆ چارەسەرکردنی کێشەی قوتابخانەی ئەمەریکی و بە هۆی پابەندنەبوونی ناوبراو بە ڕێنمایی و نووسراوەکانی وەزارەتی پەروەردە، ئاگاداری هەموو دیک و باوکان دەکەینەوە کە وەزارەت مامەڵە لەگەڵ ئەم قوتابخانەیە ناکات.

بەرێوەبەرایەتی قوتابخانە و پەیمانگە ناحکومییەکان

#lightbox .modal-content { display: inline-block; text-align: center; } #lightbox .close { opacity: 1; color: rgb(255, 255, 255); background-color: rgb(25, 25, 25); padding: 5px 8px; border-radius: 30px; border: 2px solid rgb(255, 255, 255); position: absolute; top: -15px; right: -55px; z-index:1032; }

ئەم پەیجە 202 جار بینراوە