گالری زیبا با مرتب سازی در جی کوئری. گالری تصاویر در جی کوئری با جلوه های جالب گالری جی کوئری

سلام به همه!
توسعه دهندگان از همه رشته ها، هنگام ایجاد پروژه وب بعدی، اغلب به این سوال علاقه مند هستند که چگونه انواع مختلف تصاویر را به کاربران خود ارائه دهند، چه عکس باشند و چه مجموعه ای از تصاویر. برای این کار، ذهن کنجکاو فضای آنلاین، که البته بیشتر این فضا «بورژوایی» است، هر روز بیشتر به دنبال راه حل های جدید برای ایجاد اسلاید شوها و گالری های عکس دیدنی، رنگارنگ و از همه مهمتر کاربردی هستند. در بیشتر موارد، آنها توسط توسعه دهندگان برای طراحی الگوی پروژه وب در حال ایجاد یا به صورت پلاگین ها و ماژول ها برای یک موتور مدیریت سایت خاص سفارشی می شوند. ارزش نگاه کردن به الگوهای مدرن را دارد، هیچ یک تم واحد، به استثنای موارد نادر، بدون نوعی نوار لغزنده پلاگین یا چرخش تصویر ساده کامل نمی شود. بنابراین قابل درک است که بسیاری از توسعه دهندگان وب می خواهند چیزی شبیه به این را در زرادخانه خود به دست آورند و خوانندگان خود را با ارائه مؤثر تصاویر در سایت های خود به طور کامل شگفت زده کنند.

در ادامه سری بررسی‌هایم درباره راه‌حل‌های ایجاد جدید در حال ظهور، تصمیم گرفتم مجموعه کامل‌تری از اسلایدشوها و گالری‌های عکس جالب و مؤثری را که تا به حال دیده‌ام، با استفاده از جادوی jQuery ایجاد کنم، جمع‌آوری کنم.
می‌خواهم فوراً به شما هشدار دهم که منابعی که در بررسی مورد بحث قرار خواهند گرفت عمدتاً به زبان انگلیسی هستند، اما فکر می‌کنم هر کسی که به آن نیاز داشته باشد آن را به طور مستقیم یا با کمک مترجمانی که حداقل ده‌ها سکه از آن‌ها وجود دارد متوجه خواهد شد. . و اگر با دقت جستجو کنید، می توانید توضیحاتی در مورد تکنیک ایجاد برخی گالری ها و اسلایدرها به زبان روسی بیابید، زیرا بسیاری از توسعه دهندگان وب ما در فرآیند کار بر روی یک پروژه خاص، ابتدا برای خود ترجمه می کنند و سپس توضیحات مفصلی از همه آنها ارسال می کنند. دستکاری های آنها در دسترسی آزاد .
بنابراین، برای مثال، من هم همین کار را انجام دادم، زمانی که مکانیسم ایجاد را کار می کردم، ابتدا یک گزینه گالری مناسب برای خودم در بورژوازی پیدا کردم، آن را برای درک بهتر کاری که انجام می دادم ترجمه کردم، و بعداً جرات کردم. امیدواریم، مقاله بدی در مورد استفاده از اسکریپت Highslide با نمونه هایی از کار در انواع مختلف برنامه باشد.
و بنابراین، به اندازه کافی اشعار غیر ضروری، بیایید مستقیماً به بررسی برویم، نگاه کنیم، توضیحات مختصری را بخوانیم و از بین تعداد زیادی افزونه و اسکریپت جدید jQuery انتخاب کنیم تا اسلایدرهای جالب، گالری عکس، نمایش اسلاید را در سایت های خود پیاده سازی کنیم: با تغییر خودکار و دستی اسلایدها، لغزنده های تصویر پس زمینه، با و بدون ریز عکسها و غیره. و غیره...

از.سایت | نسخه ی نمایشی

یک گالری عکس jQuery کامل و قابل تنظیم با عناصر نمایش اسلاید، جلوه های انتقال و گزینه های متعدد آلبوم. سازگار با تمام مرورگرهای مدرن دسکتاپ و موبایل.

راهنمای ایجاد یک گالری تمام صفحه مبتنی بر جی کوئری. ایده این است که تصویر بند انگشتی تصویر تمام صفحه نمایش داده شده را در کنار هم نشان دهیم، با انعکاس در هنگام حرکت در میان تصاویر با استفاده از فلش ها یا کوک ماوس. تصاویر بزرگ بسته به انتقالی که انتخاب می کنید، در سبک نمایش اسلاید به بالا یا پایین تغییر می کنند. قابلیت تغییر مقیاس تصویر، که باعث می شود تصویر در پس زمینه برای مشاهده در حالت تمام صفحه یا متناسب با اندازه صفحه باشد.

لغزنده اختلاف منظر

لغزنده اختلاف منظریک راه حل جالب برای نمایش تصاویر در قالب یک نمایش اسلاید با کنترل های دستی. محل اصلی ریز عکسها را جذب می کند. سایت رسمی دارای تفکیک کاملی از ادغام و پیکربندی اسلایدر است.

گالری نمایش اسلاید مینیمالیستی با جی کوئرییک گالری تصاویر عالی با عناصر تغییر خودکار تصویر، و همچنین توانایی کنترل دستی نمایشگر و انتخاب تصاویر از یک بلوک کشویی با شبکه ای از تصاویر کوچک. از معایب، می توان به عدم مشاهده تصاویر در مقیاس کامل اشاره کرد، اما این مینیمالیسم این گالری است.

این یک نمایش اسلاید تمام صفحه با تغییر خودکار تصاویر، بدون افکت های ذهنی است، همه چیز ساده و سلیقه ای است.

گالری مینیمیتیک پلاگین jQuery بسیار قابل تنظیم با طیف گسترده ای از انتقال تصویر است. با استفاده از گالری Minimit، می‌توانید نمایشی از تصاویر را در قالب یک چرخ فلک، یک نمایش اسلاید، یک چرخاننده ساده و یک اسکرول تصویر معمولی سازماندهی کنید.

یک پلاگین کوچک (2 کیلوبایت) جی کوئری است که روشی ساده و بی معنی برای نمایش تصاویر به صورت اسلایدشو ارائه می دهد.

یک گالری جاوا اسکریپت زیبا با کنترل های بصری و سازگاری یکپارچه با همه رایانه ها، آیفون ها و دستگاه های تلفن همراه است. نصب و پیکربندی بسیار آسان است

برخلاف بسیاری از اسلایدرهای تصویر جاوا اسکریپت و جی کوئری، Slider.js یک راه حل ترکیبی است که کارایی انتقال ها و انیمیشن های CSS3 بر اساس .

این یک قالب یک صفحه ای برای ایجاد ارائه های مختلف در HTML5 و CSS3 است.

دیاپونمایش اسلاید یک پروژه متن باز است. در صورت تمایل می توانید تغییرات یا بهبودهایی را پیشنهاد دهید. شما می توانید آن را به صورت رایگان دانلود و استفاده کنید و هیچ چیز و هیچ کس مانع از استفاده از این اسلایدر در پروژه های خود نمی شود. تنظیم نوار لغزنده آسان است، جابجایی های جالبی بین محتوای ارائه شده انجام می شود، و می توانید هر چیزی را در نوار لغزنده قرار دهید، بسیار سریع و بدون هیچ گونه مانعی کار می کند.

چیزی بیش از ابزار دیگری برای ایجاد نمایش اسلاید در وب سایت ها و سایر پروژه های وب نیست. پشتیبانی از تمام مرورگرهای مدرن، انیمیشن های افقی و عمودی، پشتیبانی از انتقال های سفارشی، API بازگشت به تماس و موارد دیگر. شما می توانید از هر عنصر html در اسلایدها استفاده کنید، برای مبتدیان قابل درک و در دسترس است، کاملا رایگان توزیع می شود.

نمایش اسلاید جاوا اسکریپت برای توسعه چابک

نمایش اسلایدهای خود را با این افزونه شگفت انگیز جی کوئری سفارشی کنید. ابزاری با قابلیت شخصی سازی بسیار بالا که می توانید محتوای خود را مطابق با نیازهای خود بسازید. برای ادغام آسان تر با داده های خارجی یا داده های CMS خود، فرمت داده به صورت . این یک نسخه جدید است و از ابتدا نوشته شده است. توسعه دهندگان سعی کرده اند کل فرآیند کار با زاده فکر خود را به قابل درک ترین و قابل فهم ترین شکل توصیف کنند.

یک پلاگین جی کوئری است که به شما امکان می دهد لیست های نامرتب را به نمایش اسلاید با جلوه های انیمیشن جذاب تبدیل کنید. در یک نمایش اسلاید، می توانید لیستی از اسلایدها را با استفاده از اعداد یا تصاویر کوچک و یا با استفاده از دکمه های قبلی و بعدی نمایش دهید. این نوار لغزنده دارای انواع مختلفی از انیمیشن اولیه است، از جمله مکعب (با زیرنماهای مختلف)، لوله، بلوک و غیره.

مجموعه کاملی از ابزارها برای سازماندهی انواع ارائه مطالب مختلف در پروژه های وب شما. بچه های بورژوا تمام تلاش خود را کردند، تقریباً انواع اسلایدرها و گالری های مختلف در این کلیپ با استفاده از جادوی jQuery گنجانده شد. نوار لغزنده عکس، گالری عکس، نمایش اسلاید پویا، چرخ فلک، نوار لغزنده محتوا، منوی برگه ها و بسیاری موارد دیگر، به طور کلی، فضایی برای پرسه زدن تخیل خستگی ناپذیر ما وجود دارد.

این یک پلاگین نمایش اسلاید جی کوئری است که با در نظر گرفتن سادگی ساخته شده است. تنها با مفیدترین مجموعه ای از ویژگی ها برای مبتدیان و توسعه دهندگان پیشرفته به طور یکسان بسته شده است، که توانایی ایجاد نمایش های اسلاید ساده و در عین حال بسیار موثر کاربرپسند را فراهم می کند.

- یک نوار لغزنده ساده که بر روی jQuery ساخته شده است، از همه جهات ساده است، نیازی به مهارت خاصی ندارد، فکر می کنم برای بسیاری از آنها برای پیاده سازی یک نمایش اسلاید در سایت های خود مفید خواهد بود. این افزونه در تمام مرورگرهای مدرن از جمله IE آهسته آزمایش شده است.

jbgalleryنوعی ویجت رابط کاربری است که در کتابخانه جاوا اسکریپت جی کوئری نوشته شده است. عملکرد آن نشان دادن یک تصویر بزرگ به عنوان پس‌زمینه سایت در حالت تمام صفحه، چندین تصویر به عنوان یک نوار لغزنده است. همه حالت‌های نمایش دارای کنترل‌های مشاهده هستند. در راه خود، یک راه حل جالب، جایی که حتی استاندارد نیست.

یک پلاگین jQuery با استفاده آسان برای نمایش عکس های شما به صورت اسلاید شو با افکت های انتقال بین تصاویر (دیده شده و جالب تر). jqFancyTransitions سازگار است و به طور گسترده با Safari 2+، Internet Explorer 6+، Firefox 2+، Google Chrome 3+، Opera 9+ آزمایش شده است.

یک افزونه رایگان جی کوئری برای مشاهده تصاویر و سایر اطلاعات در فرم لایت باکس است. پنجره پاپ آپ با کنترل، پس زمینه سایه دار و همه، ساده و خوش سلیقه.

یکی دیگر از پلاگین های جی کوئری از سری لایت باکس، اگرچه وزن آن بسیار کم است (9 کیلوبایت)، در حالی که فرصت های زیادی برای کار دارد. یک رابط طراحی مناسب وجود دارد که همیشه می توانید آن را با CSS بهبود یا سفارشی کنید.

در حال حاضر از نام مشخص می شود که هیچ چیز جالبی نیست، ما یک اسکرول خودکار تصویر بسیار ساده داریم که کنترل های کاملاً از دست رفته دارد. چه کسی می داند، شاید با مینیمالیسم خود، این نوار لغزنده توجه شما را به خود جلب کند.

چرخاننده تصویر با انواع مختلف انتقال. هم در حالت خودکار و هم با کلیک کار می کند، تنظیم آن بسیار آسان است.

- یک گالری تصویر تمام عیار به جای یک نوار لغزنده. پیش نمایش تصویر بند انگشتی و امکان انتخاب افکت انتقال، پشتیبانی کامل از همه مرورگرها، شرح مفصل ادغام در یک پروژه وب و توزیع رایگان.

این یک پیاده سازی از نمایش های اسلاید آماده برای استفاده با استفاده از scriptaculous/prototype یا jQuery است. Horinaja نوعی نوآوری است زیرا به شما امکان می دهد از چرخ برای پیمایش در محتوای قرار داده شده در نوار لغزنده استفاده کنید. هنگامی که نشانگر ماوس خارج از ناحیه نمایش اسلاید است، تغییر به صورت خودکار اتفاق می افتد، هنگامی که نشانگر ماوس روی نمایش اسلاید قرار می گیرد، پیمایش متوقف می شود.

تراشه ای از یک سری از ساده ترین اسکرول های تصویر، اگرچه به ترتیب با وجود کنترل های مشاهده، هم در حالت خودکار و هم در حالت دستی کار می کند.

اسلایدر s3- پلاگین jQuery، یک نمایش اسلاید از لیست نامرتب تصاویر ایجاد می کند و می تواند به راحتی در هر وب سایتی پیاده سازی شود.

این یک پلاگین جی کوئری است که برای مدیریت حجم زیادی از عکس ها و در عین حال صرفه جویی در پهنای باند بهینه شده است.

پس زمینه وگاس

افزونه Vegas Background jQuery به شما این امکان را می دهد که تصاویر پس زمینه تمام صفحه زیبایی را به صفحات وب خود اضافه کنید، همه با عناصر نمایش اسلاید. اگر پیچیدگی های کار با افزونه را به دقت مطالعه کنید، می توانید راه حل های جالب زیادی پیدا کنید، البته اگر فقط به آن نیاز داشته باشید.

- یک نوار لغزنده مانند یک نوار لغزنده، نه بیشتر و نه کمتر، با شرح تصاویر یا اعلام مقالات و کنترل های ساده، با استفاده از روش "poke".

یک جاوا اسکریپت سبک (حدود 5 کیلوبایت) برای نمایش تصاویر است. تغییر اندازه و مقیاس بندی خودکار تصاویر بزرگ، به شما امکان می دهد تصویر را در اندازه کامل در پنجره مرورگر مشاهده کنید.

نسخه 4 گالری تصاویر PikaChoose jQuery در دسترس است! Pikachoose یک نمایش اسلاید سبک وزن جی کوئری با ویژگی های عالی است! ادغام با Fancybox، تم های عالی (اگرچه رایگان نیستند) و موارد دیگر توسط توسعه دهندگان افزونه به شما ارائه می شود.

تعداد تصاویر موجود در لیست شما را بررسی می کند و به صورت پویا مجموعه ای از پیوندهای عکس را به عنوان یک پیمایش دیجیتال ایجاد می کند. علاوه بر این، با کلیک بر روی هر تصویر به جلو یا عقب حرکت می‌کند و همچنین می‌توانید بسته به ناحیه‌ای که روی عکس کلیک می‌کنید، بین تصاویر اسکرول کنید (به عنوان مثال: با کلیک بر روی سمت چپ تصویر، اسلایدها به جلو و عقب حرکت می‌کنند. به ترتیب برای سمت راست تصویر).

یکی دیگر از نوار لغزنده جی کوئری که کاملاً در هر قالب وردپرس قرار می گیرد.

توسعه دیگر "Nivo"، مانند هر کاری که بچه های این استودیو انجام می دهند، این افزونه با کیفیت بالا ساخته شده است، شامل 16 افکت انتقال منحصر به فرد، ناوبری صفحه کلید و موارد دیگر است. این نسخه شامل یک افزونه اختصاصی به طور مستقیم برای وردپرس است. بنابراین برای همه طرفداران این موتور وبلاگ نویسی، Nivo Slider برای موضوع مناسب خواهد بود.

پلاگین جی کوئری که به شما امکان می دهد به سرعت یک اسلایدر ساده، موثر و زیبا برای تصاویر با هر اندازه ایجاد کنید.

پیروباکس- این یک اسکریپت سبک وزن jQuery "lightbox" است، نمایش در یک بلوک پاپ آپ انجام می شود که به طور خودکار اندازه تصویر را با تمام کنترل ها تنظیم می کند.

سازندگان این گالری یک نمایش نسبتاً اصلی از تصاویر ارائه می دهند. تصاویر به صورت ریز در یک شکل موج نمایش داده می شوند، وقتی روی تصویر کوچک کلیک می کنید، یک نسخه متوسط از تصویر را می بینیم، برای بار دوم کلیک کنید و یک تصویر بزرگ خواهید داشت. شما می توانید این را یک آزمایش در نظر بگیرید، اما باید اعتراف کنید، چیزی جدید و غیر معمول همیشه جالب است.

نمایش اسلاید تمام صفحه با HTML5 و jQuery

برای ایجاد نمایش اسلاید و نمایش تصاویر در حالت تمام صفحه، توسعه دهندگان از افزونه Vegas jQuery که قبلاً برای شما آشنا بود، استفاده کردند که حاوی بسیاری از ایده ها و تکنیک هایی است که قبلاً به طور مفصل در مقالات گروه توضیح داده شده بود. جذب عناصر صوتی HTML5 و سبک انتقال بین تصاویر.

یکی دیگر از پیشرفت های تیم Codrops، یک گالری تصاویر تمام عیار و کاربردی است، با این حال، توضیح آن چه فایده ای دارد، باید آن را ببینید.

نمایش اسلاید تصویر، تصاویر درست در مقابل چشمان شما ناپدید می شوند، اثر فوق العاده است.

این یک چارچوب گالری تصاویر جاوا اسکریپت است که بر اساس کتابخانه jQuery است. هدف این است که فرآیند توسعه یک گالری تصاویر حرفه ای برای وب و دستگاه های تلفن همراه را ساده کنید. امکان مشاهده در یک پنجره پاپ آپ و در حالت تمام صفحه وجود دارد.

بی سر و صدا کم کم داریم به آن عادت می کنیم و منتظر کارهای جدید تیم Codrops هستیم. لطفاً یک نوار لغزنده تصویر عالی با جلوه انتقال سه بعدی عالی برای مشاهده تصاویر در حالت تمام صفحه دریافت کنید.

یکی دیگر از افزونه های سازمان دهنده نمایش اسلاید برای وردپرس. به راحتی تقریباً در هر طراحی ادغام می شود و گزینه های سفارشی سازی زیادی را برای کاربران پیشرفته و کاربران بی تجربه به طور یکسان ارائه می دهد.

افزونه دیگری که برای وردپرس نوشته شده است، سازماندهی نمایش اسلاید تصاویر یا هر محتوای دیگری را در وبلاگ شما بسیار آسان تر می کند.

افزونه نمایش اسلاید خوب برای ادغام وردپرس. Xili-floom-slideshow به طور خودکار نصب می شود و تنظیمات شخصی نیز مجاز است.

Slimbox2یک افزونه وردپرس شناخته شده برای نمایش تصاویر با افکت "Lightbox" است. پشتیبانی از نمایش اسلاید خودکار و تغییر اندازه تصویر در پنجره مرورگر. و به طور کلی این افزونه نسبت به سایر افزونه های این سری برتری های زیادی دارد.

این افزونه، ویجت به شما اجازه می دهد تا نمایش های اسلاید و ارائه های پویا و قابل کنترلی را برای وب سایت یا وبلاگ خود ایجاد کنید که توسط وردپرس طراحی شده است.

این افزونه وردپرس تصاویر گالری تعبیه شده را به یک نمایش اسلاید ساده و انعطاف پذیر تبدیل می کند. این افزونه از نوار لغزنده تصویر jQuery FlexSlider و تنظیمات برگزیده کاربر استفاده می کند.

یک افزونه وردپرس برای سازماندهی نمایش اسلاید عکس‌ها، تصاویر از SmugMug، Flickr، MobileMe، Picasa یا Photobucket RSS است که با استفاده از جاوا اسکریپت خالص ارائه و نمایش داده می‌شود.

یک اسلایدر ساده برای وردپرس و نه تنها. هیچ چیز اضافی و دست و پا گیر نیست، کار به سبک مینیمالیستی انجام شده است، تاکید بر ثبات و سرعت است، کاملا به موتور مدیریت وبلاگ متصل می شود.

به نظر من Skitter یکی از بهترین اسلایدرهای وردپرس است. ثبات و سرعت، کنترل های نه چندان برجسته، جلوه های انتقال و اتصال نسبتاً ساده به موضوع را جذب می کند.

افزونه ای برای وردپرس است که با آن می توانید به راحتی و به سرعت یک گالری تصاویر را در سایت خود با قابلیت مشاهده آن در حالت نمایش اسلاید سازماندهی کنید. نمایشگر می تواند به صورت خودکار یا به طور کامل با ریز عکسها و شرح تصاویر کنترل شود.

از.سایت | نسخه ی نمایشی

تمام تصاویر یک پست/صفحه را به صورت اسلاید نمایش می دهد. نصب آسان. این افزونه برای نسخه انیمیشن انتقالی به Adobe Flash نیاز دارد، اگر Flash یافت نشد، نوار لغزنده به طور معمول کار می کند.

یک نوار لغزنده ساده دیگر برای وردپرس که تصاویر پست ها و پیش نمایش کوتاه مقالات را نشان می دهد. من هر از گاهی از چنین افزونه ای در این وبلاگ استفاده می کنم.

Meteor Slides یک نوار لغزنده وردپرس جی کوئری با بیش از بیست سبک انتقال برای انتخاب است. نویسنده این افزونه را "شهاب" نامیده است، احتمالاً به معنای سرعت کار است، شاید من متوجه هیچ چیز شهاب سنگی نشدم.

oQey Gallery یک گالری عکس کامل با عناصر نمایش اسلاید برای وردپرس، با قابلیت های ویدئویی و موسیقی جاسازی شده است.

این یک نمایش اسلاید با عناصر انیمیشن فلش برای مشاهده تصاویر و فیلم ها در وب سایت ها و وبلاگ ها است. شما می توانید این اسلایدر را در هر وب سایتی، در هر اندازه و با هر محتوایی که دوست دارید قرار دهید.

افزونه Flash Gallery با پشتیبانی از چندین آلبوم در هر پست، مرور تمام صفحه و حالت نمایش اسلاید، گالری های معمولی شما را به دیوارهای تصویر خیره کننده تبدیل می کند.

WOW Slider یک نوار لغزنده jQuery برای وردپرس با جلوه های بصری شگفت انگیز (Explosion، Fly، Blinds، Squares، Fragments، Base، Fade، Stack، Vertical Stack و Linear) و قالب های حرفه ای رندر شده است.

Promotion Slider یک پلاگین جی کوئری است که ایجاد یک نمایش اسلاید ساده یا چندین منطقه تبلیغاتی چرخان را در یک صفحه آسان می کند، زیرا بسیار قابل تنظیم است، بنابراین کنترل کاملی بر آنچه در نوار لغزنده نشان می دهید و نحوه عملکرد ماژول به طور کلی خواهید داشت.

| نسخه ی نمایشی

جدید در نسخه 2.4: پشتیبانی از مرتب‌سازی عکس drag-n-drop مستقیماً از طریق ویرایشگر وردپرس و همچنین امکان افزودن لینک عکس به تصاویر اصلی. (IE8 ممکن است دارای اشکال باشد، در همه مرورگرهای اصلی عالی کار می کند. نویسندگان قول پشتیبانی کامل از IE8 در آینده را می دهند.)

| نسخه ی نمایشی

آکورد پایانی این بررسی این افزونه برای وردپرس خواهد بود، اسلایدر دیگری با جلوه های بصری جالب انتخاب و تغییر تصاویر.

من به همه موارد بالا نگاه می کنم و تعجب می کنم که چه تعداد زیادی از افراد شیک دارند، و این بسیار دور از آن چیزی است که توسعه دهندگان مختلف وب اخیراً در مورد سازماندهی تصاویر در پروژه های وب جمع کرده اند. خیلی خوب است که اکنون می توان چنین راه حل های فوق العاده ای را برای ایجاد گالری ها و نمایش های اسلاید زنده کرد.
به جرات می توانم بی سر و صدا امیدوار باشم که در این مجموعه چیز جالبی برای خود بیابید، گالری یا اسلایدر منحصر به فرد خود را ببندید، تا کاربران خود و البته عزیزان خود را خوشحال کنید، و بدون آن کجا.. .

در این آموزش من به شما نشان خواهم داد که چگونه مینیمال، اما در عین حال راحت و کاربردی ایجاد کنید گالری عکس جی کوئری، یا یک گالری تصاویر، همانطور که دوست دارید. گالری قابلیت ایجاد دسته بندی و به دنبال آن فیلتر کردن را دارد. امکان اجرای نمایش اسلاید نیز وجود دارد. گالری در همه مرورگرها کار می کند، بنابراین هیچ مشکلی در سازگاری وجود نخواهد داشت.

برای ایجاد این گالری از دو کتابخانه رایگان استفاده خواهد شد jQuery: Quicksandو PrettyPhoto. آنها ایجاد گالری را بسیار ساده می کنند. مثل همیشه می توانید نتیجه کار را در صفحه نمایشی مشاهده کنید و همچنین آرشیو را از گالری کاری و تمامی فایل های منبع دانلود کنید. تنها نکته منفی، اگر بتوانم بگویم، ایجاد دستی تصاویر کوچک برای تصاویر بزرگ است. برای هر چیز دیگری، این آلبوم عکسشایسته توجه

منابع

نشانه گذاری HTML

ابتدا، اجازه دهید پانل را با لیست دسته بندی ها تجزیه و تحلیل کنیم، این یک لیست گلوله ای ul است. علاوه بر این، هر عنصر از لیست باید یک نام کلاس منحصر به فرد داشته باشد.

دسته بندی ها:

همه

دسته 1

دسته 2

دسته 3

دسته 4

نام تصویر

همانطور که در بالا ذکر شد، موارد لیست، تصاویر موجود در گالری هستند. هر عنصر لیست شامل اجزایی است. این خود تصویر، یا بهتر است بگوییم تصویر کوچک آن، و همچنین یک توضیح است. تصویر کوچک پیوندی به تصویر اصلی است. ویژگی rel برای فراخوانی جاوا اسکریپت و باز کردن تصویر اصلی مورد نیاز است.

همچنین 2 مورد مهم را فراموش نکنید، عنصر li list باید یک ویژگی منحصر به فرد data-id داشته باشد. ویژگی data-type شامل کلاس دسته است که لیست آن را در بالا توضیح دادم. به نظر می رسد همه چیز در مورد نشانه گذاری است.

سبک های CSS

من روی سبک ها تمرکز نمی کنم، زیرا از یک کتابخانه آماده استفاده می کنیم PrettyPhotoکه وظیفه افزایش تصویر را بر عهده دارد و کدهای css زیادی دارد. با این حال، شایان ذکر است که 5 گزینه طراحی برای تصویر بزرگ شده وجود دارد، اگرچه در حالت ایده آل فقط 3 گزینه وجود دارد، زیرا در دو گزینه فقط گرد کردن حذف می شود.

بنابراین، من فقط سبک های CSS را برای ریز عکس ها و لیست دسته ها نشان خواهم داد.

دسته بندی نمونه کارها ( حاشیه-پایین: 30 پیکسل؛ )
.portfolio-categ li(
نمایش: درون خطی;
margin-right:10px;
}
.image-block(
display:block;
موقعیت: نسبی;
}
.image-block img(
حاشیه: 1px جامد #d5d5d5;
حاشیه-شعاع: 4px 4px 4px 4px;
پس زمینه:#FFFFFF;
padding: 10px;
}
.image-block img:hover (
حاشیه: 1px جامد #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
شناور به سمت چپ؛
حاشیه: 0 12 پیکسل 20 پیکسل 0;
سرریز: پنهان;
عرض: 245 پیکسل
padding: 5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( text-decoration: underline; )

در اصل، همه چیز باید با سبک ها روشن باشد. برای ردیف کردن دسته ها، ویژگی display روی inline تنظیم می شود. برای دادن جلوه ضربه ای به تصویر، رنگ پس زمینه (سفید) و بالشتک 10 پیکسلی تنظیم شده است. اندازه آیتم های فهرست در .portfolio-area li تنظیم شده است.

جی کوئری

و در نهایت، مهمترین چیز، به خاطر آن کل درس. این کد جی کوئری است. بیایید با فیلتر کردن تصاویر بر اساس دسته شروع کنیم.

// همه عناصر فرزند پورتفولیو-منطقه را انتخاب کنید و روی یک متغیر بنویسید
var $data = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) (
$(".filter li").removeClass("active");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

اگر (filterClass == "همه") (
var $filteredData = $data.find(".portfolio-item2");
) دیگر (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
مدت زمان: 600
تنظیم ارتفاع: "خودکار"
)، تابع() (

LightboxPhoto();
});
$(this).addClass("فعال");
بازگشت نادرست؛
});

با استفاده از متد clone() و انتخابگر، همه فرزندان .portfolio-area را انتخاب کرده و در متغیر $data می نویسیم. در مرحله بعد، یک کلیک روی یکی از دسته ها، عنصر li لیست با کلاس .portfolio-categ را دنبال می کنیم. با حذف removeClass("active") همه دسته ها را غیرفعال می کنیم، اگر این کار انجام نشود، با گذشت زمان همه دسته ها فعال می شوند و فیلتر کردن متوقف می شود.

از آنجایی که روی عنصر لیست کلیک می کنیم، این انتخابگر حاوی عنصر list است، یعنی li، مقدار ویژگی کلاس را از آن می گیریم و از متد split استفاده می کنیم تا نام کلاس را به چند قسمت تقسیم کنیم، مرز یک فاصله است. (یعنی اگر کلاس "همه فعال" بود، پس از تقسیم، آرایه ای از "همه" و "فعال" دریافت می کنیم). و سپس، با استفاده از روش slice، اولین عنصر آرایه (در مورد ما، "all") را انتخاب می کنیم و نتیجه حاصل را در متغیر filterClass می نویسیم. اگر فضای خالی وجود نداشته باشد، نام کلاس تغییر نخواهد کرد.

بعد، بررسی می کنیم که آیا رشته در متغیر filterClass وجود دارد یا خیر همهسپس با استفاده از متد .find همه عناصر با کلاس portfolio-item2 را از آرایه $data که در بالا در نظر گرفتیم انتخاب می کنیم. عناصر انتخاب شده (و اینها همه عناصر لیست هستند، یعنی همه تصاویر) در متغیر filteredData قرار می گیرند.

در غیر این صورت، اگر filterClass برابر نباشد همه، سپس همه عناصر لیست را در متغیر filterData قرار نمی دهیم، بلکه فقط آنهایی را که ویژگی نوع داده آنها با کلاس دسته مطابقت دارد، قرار می دهیم. به طور خلاصه، عناصر تنها یک دسته.

و در نهایت متغیر حاصل را به کتابخانه ارسال می کنیم شن و ماسه روان جی کوئری، که فیلتر تصویر را انجام می دهد. همه چیز در مورد فیلتر کردن است.

حالا در مورد بزرگنمایی تصویر در پنجره پاپ آپ. همه چیز در اینجا بسیار ساده تر است.

jQuery("a").prettyPhoto((
انیمیشن سرعت: "سریع"،
نمایش اسلاید: 5000
موضوع: "فیس بوک"،
show_title: نادرست
overlay_gallery: نادرست
});

کلیک روی پیوندی را ردیابی می کند که ویژگی rel آن با prettyPhoto شروع می شود. سپس کتابخانه وارد بازی می شود. زیبا عکس، و تصویر به طور معجزه آسایی بزرگ می شود. به هر حال، ما چندین پارامتر را نیز پاس می کنیم. مانند سرعت انیمیشن بالا، تاخیر در نمایش اسلاید 5 ثانیه، تم فیس بوک (در مجموع 5 تم وجود دارد، آنها در پوشه تصاویر / beautifulPhoto هستند) و همچنین نمایش نام عکس و افزایش تصویر هنگام نگه داشتن ماوس روی آن.

سلام به همه! امروز قصد داریم در مورد احتمالاً بهترین گالری عکس رایگان، اسلایدر ویدیو و عکس صحبت کنیم، بیایید در مورد "قاب عکس" صحبت کنیم. علیرغم اینکه 2 سال است که از فیلمنامه پشتیبانی نمی شود و نویسنده به آن روی آورده است پروژه مشابهعالی کار می کند و همچنان چشم را خشنود می کند.

نکات مثبت اصلی (+)

سادگینصب، پیکربندی و استفاده علاوه بر جی کوئری، شما نیاز خواهید داشت شامل فقط 2 فایلو برای نمایش گالری، باید فقط پیوندهای تصاویر را در آنجا مشخص کنید.
کمی تاثیر می گذارد سرعتبارگذاری سایت
تطبیق پذیری. گالری شما روی تلفن، لپ تاپ و حتی روی صفحه تلویزیون شما خوب به نظر می رسد.
فراوانی تنظیمات و عملکردها،به طور جداگانه، از طریق ویژگی های تگ های HTML متصل می شوند.
پشتیبانی از دستگاه های لمسی
حمایت کردن ویدئو.
فرصت بارگذاری تنبلتصاویر.
و خیلی چیزهای دیگر که برای کاربر حرفه ای جذاب خواهد بود.

موارد منفی (-)

عدم پشتیبانی کاربراحتمال اینکه مشکل شما بررسی یا اصلاح شود تقریباً صفر است. بله، بد است، اما کشنده نیست.

اولین گزینه برای اتصال Fotorama

این گزینه اتصال ساده ترین است، اما بهترین نیست، فقط در صورتی که نیاز به نمایش گالری در اکثر صفحات سایت دارید، باید از آن استفاده کنید. مزیت این گزینه استفاده از CDN است.

در حال بررسی jQueryبه کد منبع سایت بروید (میانبر Ctrl + U) → سعی کنید چیزی شبیه به این خط پیدا کنید: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js
برای سهولت جستجو، از Ctrl + F استفاده کنید. اگر هیچ خطی وجود نداشته باشد، باید jQuery را اضافه کنید. در وردپرس، این کار را می توان با چسباندن کد زیر در فایل توابع موضوع (functions.php) انجام داد. در واقع، این اسکریپت زمانی استفاده می‌شود که بین نسخه‌های مختلف جی کوئری تداخل وجود داشته باشد، و طبق طرح زیر کار می‌کند: جی کوئری ثبت‌شده قبلی را حذف می‌کند، اسکریپت جدید را ثبت می‌کند و اسکریپت را خروجی می‌دهد. نسخه های فعلی کتابخانه jQuery را می توانید در اینجا بیابید.
شما فقط می توانید این خط را بین آنها وارد کنید و :
<اسکریپت src= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> اسکریپت >
ما شامل fotorama.css و fotorama.js هستیم.کد زیر را بین تگ ها قرار دهید و، در وردپرس این کار در فایل هدر موضوع (header.php) انجام می شود. "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; ) add_shortcode("foto","sd");
حال هنگام نوشتن مقاله، کد کوتاه را در انتها وارد کنید

ایجاد مستقیم گالری

گالری با استفاده از کد HTML ارائه می شود ظرف

c class="photorama"، ظرف حاوی کد نمایش تصویر است یا لینک یک تصویر . هنگام نوشتن مقاله در موتور وردپرس، ویرایشگر را به حالت متن تغییر دهید و وارد ظرف شوید

c class="fotorama".

به نظر می رسد این است:

یا مانند این (شماره‌گذاری پیوند اختیاری است):

1 3 4

نمونه هایی از تنظیمات Fotorama

ابعاد ظرف

اندازه بلوک فریم اندازه تصویر اول است، سایر تصاویر متناسب با تصویر اول مقیاس بندی می شوند. برای اصلاح این وضعیت می توانید ابعاد را به صورت دستی مشخص کنید.

تنظیمات دیگری نیز وجود دارد:

data-width="98%" // عرض نسبی data-ratio="800/600" // نسبت تصویر data-minwidth="420" // دقیقه. عرض data-maxwidth="900" // حداکثر. عرض data-minheight="320" // دقیقه. height data-maxheight="100% // نسبی حداکثر. height data-height="100% // ارتفاع نسبی

مینیاتور

Data-nav="thumbs" مسئول ریز عکسها است

اما این روش خیلی کارآمد نیست، زیرا اسکریپت باید همه عکس‌ها را به یکباره بارگذاری کند تا ریز عکس‌ها ایجاد شود، بنابراین منطقی‌تر است که کپی‌های کوچکی از تصاویر را از قبل آماده کنیم. وردپرس به طور خودکار تصاویر کوچک تولید می کند و ما از آنها استفاده خواهیم کرد. برای پیوند دادن به تصویر کوچک -70x70 را به نام فایل اضافه کنید (https://website/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://website/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

به طور پیش‌فرض، تصویر کوچک 64 × 64 است. می‌توانید این پارامتر را با استفاده از data-thumbwidth (عرض) و data-thumbheight (ارتفاع) تنظیم کنید. اگر می خواهید تصویر کوچک اندازه خودش را داشته باشد، پارامترهای عرض و ارتفاع را برای فایل تصویر کوچک تنظیم کنید:

کد HTML + Fotorama

قاب عکس به خوبی HTML و CSS را مدیریت می کند که عملکرد اسکریپت را تا حد زیادی گسترش می دهد. با پیوندها، بلوک ها، جداول، پاراگراف ها کار کنید، CSS بنویسید و موارد دیگر. در زیر نمونه هایی از کارهای این گالری را مشاهده می کنید. اگر قسمت بصری نمایش داده نشد، روی دکمه "نتیجه" کلیک کنید.

نمایش / پنهان کردن نمونه ها

قلم ooppwb توسط Ivanov Klim (@DreamerKlim) را در CodePen ببینید.

قلم aVEEVb توسط Ivanov Klim (@DreamerKlim) را در CodePen ببینید.

حالت تمام صفحه

data-allowfullscreen="true" //در پنجره مرورگر data-allowfullscreen="native" //برای کل مانیتور

امکان افزودن یک تصویر بزرگ جداگانه برای حالت تمام صفحه از طریق data-full وجود دارد:

دیگر

data-autoplay= "true" //autoplay data-autoplay="3000" //فاصله بین اسلایدها بر حسب میلی ثانیه data-caption = "One" //نظرات روی تصاویر data-keyboard = "true" // با فلش ها پیمایش کنید data-shuffle= "true" //تصاویر مخلوط شده اند data-navposition= "بالا" // تصاویر کوچک در بالاحلقه داده = "درست" //پیمایش چرخهبیایید سعی کنیم همه چیز را به هم وصل کنیم و یک ویدیو اضافه کنیم

data-caption ="One" data-keyboard ="true" data-shuffle ="true" data-navposition ="top" data-autoplay ="true" data-loop ="true">

"چند نظر 1">

"چند نظر 2"> برای یافتن کاری که دوست دارید

سلام به همه! در این مقاله به بررسی خواهیم پرداخت چگونه با jQuery یک گالری زیبا و قابل مرتب سازی راحت بسازیم.

یک گالری زیبا که به راحتی قابل مرتب سازی است یک چیز عالی برای سایت شما است که شما و بازدیدکنندگانتان را به وجد خواهد آورد. امروز ما به یک پلاگین بسیار آسان برای نصب و پیکربندی کتابخانه نگاه خواهیم کرد. جی کوئری– فیلترریزر.

با وجود سهولت استفاده، این افزونه بسیار سبک و موثر است. بیایید با جزئیات بیشتری به آن نگاه کنیم.

تظاهرات

برای مشاهده نحوه عملکرد این افزونه به سایت رسمی مراجعه کنید و اینجا پیش روی شماست!

می‌توانید مرتب‌سازی بر اساس شهر، طبیعت، صنعت، طلوع، غروب خورشید یا نمایش همه عکس‌ها (پیش‌فرض) را انتخاب کنید. یک دکمه وجود دارد بر زدن، که به شما امکان می دهد تصاویر را به هم بزنید. دکمه ها ASCو DESCتصاویر را به ترتیب صعودی و نزولی مرتب کنید. اگر می خواهید یک تصویر را بر اساس موقعیت یا توضیحات جستجو کنید، مورد مورد نظر را در لیست کشویی انتخاب کنید و یک عبارت جستجو را در قسمت جستجو وارد کنید. وقتی با ماوس روی تصویر می روید، تصویر از سیاه و سفید به رنگی تغییر می کند.

نصب و راه اندازی

برای دانلود کتابخانه، روی دکمه کلیک کنید دانلودیا استفاده کنید NPM:

npm filterizr را نصب کنید

افزونه قبلاً خارج از جعبه پیکربندی شده است، اما اگر می‌خواهید پیش‌فرض‌ها را لغو کنید، می‌توانید:

1) یک شی با پارامترها را به سازنده ارسال کنید جی کوئری

var filterizd = $(".filtr-container").filterizr((
// گزینه ها
})

2) بازنویسی پارامترها با استفاده از setOptions()روش در شی Filterizr.

Filterizd.filterizr("setOptions", (
// گزینه ها
})

گزینه ها

گزینه های پیش فرض:

گزینه ها = (
مدت زمان انیمیشن: 0.5
تماس های برگشتی: (
onFilteringStart: function() ()
onFilteringEnd: function() ( )
},
تاخیر: 0
DelayMode: "پیشرو"،
آسان کردن: "آسان کردن"،
فیلتر: "همه"،
filterOutCss: (
کدورت: 0
transform: "scale(0.5)"
},
filterInCss: (
کدورت: 0
transform: "scale(1)"
},
طرح بندی: "sameSize",
انتخابگر: ".filtr-container",
setupControls: درست است
}

دستورالعمل های دقیق تر و شرح هر پارامتر را می توان در اینجا یافت

1. پیاده سازی نمونه کارها با استفاده از گالری جی کوئری

تصاویر کوچک پروژه با تغییر موقعیت مکان نما ماوس در ستون سمت چپ پیمایش می شوند. ناحیه محتوا یک تصویر بزرگ شده با نام پروژه ها، توضیحات و لیستی از فناوری های استفاده شده را نمایش می دهد. همانطور که بین تصاویر کوچک حرکت می کنید، اطلاعات پروژه از یکی به دیگری با یک افکت متحرک خیره کننده تغییر می کند. هنگام کلیک بر روی یک تصویر در صفحه توضیحات، با استفاده از انیمیشن jQuery نیز بزرگ می شود. من همچنین می خواهم به ظاهر زیبا و خیره کننده کل صفحه نمونه کارها توجه کنم. دمو را ببینید.

2. اجرای فوق العاده یک سایت نمونه کارها با استفاده از CSS و jQuery

اجرای عالی از سایت نمونه کار عکاسان. هنگامی که روی یک آیتم منو کلیک می کنید، یک ناحیه با محتوای ارتفاع و عرض ثابت از مربع های پراکنده در سراسر صفحه جمع آوری می شود. به منظور جا دادن اطلاعات بیشتر در یک منطقه ثابت، پیمایش محتوا ارائه شده است. اجرای نمایش آثار از نمونه کارها به روشی غیرمعمول اجرا می شود: وقتی روی تصویر کوچک کلیک می کنید، عکس به عنوان تصویر پس زمینه نمایش داده می شود که با تغییر اندازه پنجره مرورگر به طور خودکار مقیاس می شود.

3. دیوار نمونه کارها با جی کوئری

راه حل اصلی برای ایجاد یک نمونه کار آنلاین. بلوک‌های پروژه (تصاویر کوچک و توضیحات کوتاه با یک پیوند) چندین پشت سر هم نمایش داده می‌شوند؛ زمانی که پنجره مرورگر تغییر می‌کند، بلوک‌ها به طور مساوی در صفحه با یک جلوه متحرک توزیع می‌شوند. هر پروژه می تواند چندین تصویر کوچک داشته باشد که انتقال بین آنها با استفاده از فلش ها انجام می شود. با کلیک بر روی پیوند صفحه ای با توضیحات کامل باز می شود، جایی که متن روی یک بلوک نیمه شفاف با ارتفاع ثابت با اسکرول قرار می گیرد. تصویر مقیاس پذیر پروژه به عنوان پس زمینه صفحه استفاده می شود. جالب به نظر می رسد - نسخه ی نمایشی را ببینید.

4. پیمایش صاف صفحه جی کوئری

اجرای اسکرول عمودی و افقی.

5. پلاگین جی کوئری "شبکه جعبه های تصویر قابل کشیدن"

یک شبکه قابل کشیدن متشکل از بلوک های محتوا و تصاویر. شبکه را می توان با ماوس کشید (هر دکمه ماوس را فشار دهید و در جهت دلخواه بکشید). وقتی روی یک تصویر کوچک کلیک می‌کنید، تصویر اصلی به تمام عرض صفحه باز می‌شود. وقتی روی یک بلوک تاریک با متن کلیک می‌کنید، ناحیه‌ای با توضیحات دقیق‌تر نشان داده می‌شود.

6. یک صفحه نمونه کار سایت

سایت تک صفحه ای با تغییر محتوای متحرک. در صفحه نمایشی، از طریق برگه های منو حرکت کنید تا اثر را ببینید.

7. تغییر نمایش بلوک ها به جی کوئری

با استفاده از این پلاگین جی کوئری "Switch Display Options" می توانید یک سوئیچ در صفحه پیاده سازی کنید که با آن بازدید کننده از نمایش جدولی اطلاعات به نمای کامل با توضیحات بلوک ها تغییر می کند. ایده آل برای نمونه کارها

8. الگوی وب سایت رستوران با گالری جی کوئری و نقشه از گوگل

یک راه حل اصلی jQuery که برای یک وب سایت کافه ایجاد شده است. این قالب دارای یک گالری jQuery جالب برای نمایش ظروف از منو است. تصاویر موجود در گالری با توجه به اندازه پنجره مرورگر مقیاس بندی می شوند. ابتدا، گالری تصاویر بندانگشتی را با نام و توضیح مختصری از ظروف نمایش می دهد، در حالی که عکس در اندازه کامل به صورت تاریک در پس زمینه نمایش داده می شود. پیمایش بین عکس های موجود با استفاده از فلش ها یا چرخ ماوس انجام می شود. با کلیک بر روی ماوس در حالت گالری، تصاویر کوچک همراه با توضیحات حذف می‌شوند و به شما امکان می‌دهند تا تصاویر بزرگ اصلی را که تا تمام عرض پنجره کشیده شده‌اند، مشاهده کنید. برای بازگشت به منوی سایت از گالری، باید روی لینک در گوشه سمت راست بالا کلیک کنید. علاوه بر گالری شیک جی کوئری، نقشه ای از گوگل به طور موثری در قالب ادغام شده است.

9. پلاگین Plasm The Wall

برای ایجاد نوعی "دیوار" از عکس ها یا بلوک های HTML که می توانند با ماوس در اطراف صفحه در یک منطقه ثابت کشیده شوند.

10. پلاگین برای نمایش عناصر در یک دایره

نمایش عناصر مختلف در امتداد دایره ای با قطر معین در صفحه.

11. صفحه خرد "سایت در حال ساخت"

این صفحه قابلیت ارسال یک آدرس ایمیل را دارد که در پایگاه داده ثبت شده و امکان ارسال اعلان در مورد باز شدن سایت به آن وجود خواهد داشت. صفحه همچنین با یک نمایش اسلاید کوچک تزئین شده است که بر اساس پلاگین jQuery Nivo Slider v پیاده سازی شده است. 2.3.

12. پلاگین QuickFlip 2

با آن، می توانید با کلیک بر روی یک پیوند، جلوه جالبی از یک کارت ویزیت چرخشی ایجاد کنید.

13. نقشه کلیک جی کوئری

ایده این است که کلیک های کاربران را ردیابی کنید. برای مشاهده عملکرد افزونه در صفحه نمایشی، روی دکمه "Analyze" کلیک کرده و سپس کلیک کنید. و در یک پس زمینه شفاف، نقاطی که با ماوس روی آنها کلیک کرده اید نمایش داده می شود.

پیاده سازی یک صفحه کلید زیبا روی صفحه. شما هرگز نمی دانید، برای چیزی به کارتان می آید.

15. یادداشت های جی کوئری

اجرای جزوات همراه با یادداشت. متن را می توان ویرایش کرد و خود یادداشت ها را می توان حذف کرد یا در صفحه جابجا کرد. برای دیدن یک مثال، به صفحه نمایشی در تب "Demo" بروید.

16. رتبه بندی با جی کوئری

17. HoverAttribute

طراحی جالب لینک ها: وقتی ماوس را روی یک لینک می گذارید، لنگر آن تغییر می کند. باحال به نظر میرسه

18. jQuery کپچای فانتزی برای فرم ثبت نام

پیاده سازی کپچا برای فرم ثبت نام. این افزونه مجموعه ای از اعداد است که باید با کشیدن و رها کردن به ترتیب صعودی تنظیم کنید. روشی کاملاً جالب برای تأیید اینکه ثبت نام یک شخص واقعی است نه یک ربات.

دکمه‌هایی در پایین صفحه نمایش داده می‌شوند که با استفاده از آن‌ها می‌توان به آرامی صفحه را به بالا یا پایین پیمایش کرد.

20. مترجم. پلاگین جی کوئری "jTextTranslate"

این افزونه از API زبان گوگل استفاده می کند و می تواند متن را به هر زبانی که گوگل ارائه می دهد ترجمه کند. برای ترجمه، باید روی نماد کنار پاراگراف کلیک کنید و زبانی را که می خواهید به آن ترجمه کنید، از لیست کشویی انتخاب کنید.

21. پلاگین صفحه بندی جی کوئری

پیاده سازی عالی از لینک های قابل پیمایش برای صفحه بندی. با استفاده از jQuery پیاده سازی شده است.

22. افزونه jQuery Notes

این افزونه جی کوئری به شما امکان می دهد یادداشت های کاغذی را در سایت خود پیاده سازی کنید.

23. افزونه jQuery "Catch404"

24. پلاگین جی کوئری jBreadCrumb

پلاگین برای ایجاد یک زنجیره ناوبری متحرک "Breadcrumbs"

25. افزونه Reel

26. پلاگین jQuery "Dance Floor"

پلاگین جی کوئری برای پیاده سازی صفحه محصول. وقتی روی تصویر محصول کلیک می کنید، توضیحات آن ظاهر می شود.

27. پلاگین jQuery "3D label cloud"

28. دکمه های سه بعدی CSS

29. اسکرول صفحه افقی متحرک

افکت اسکرول عمودی جی کوئری ایده آل برای پیاده سازی سایت های تک صفحه ای و سایت های نمونه کار. برای مشاهده افکت، روی آیتم منو در صفحه نمایشی کلیک کنید.

30. پلاگین سیستم رتبه بندی جی کوئری

اثر جی کوئری برای پیاده سازی ارزیابی چیزی. رنگ دایره ها و متن زیر آنها بسته به اینکه نشانگر ماوس در کدام یک قرار گرفته باشد تغییر می کند.

31. jQuery Panel Magic

افزونه ای که ناوبری سایت را پیاده سازی می کند. در این حالت، سایت شما به عنوان شبکه ای از اسناد ارائه می شود که انتقال بین آن ها با یک افکت jQuery جالب انجام می شود.

شما به راحتی می توانید از این افزونه برای ایجاد وب سایت های کوچک و برنامه های تحت وب استفاده کنید. همچنین در سایت های نمونه کار بد به نظر نمی رسد.

32. نشانگر بارگذاری در Mootools، افزونه MoogressBar

نشانگر بارگذاری موثر

33. پلاگین Mootools "CwComplete"

هنگام پر کردن فیلد، افزونه گزینه‌های احتمالی را برای پر کردن با استفاده از Ajax پیشنهاد می‌کند، در حالی که تنها گزینه‌هایی را فیلتر می‌کند که متن وارد شده در فیلد را برآورده می‌کند.

34. چت عالی ajax با jQuery و CSS3

قبل از شروع ارتباط، بازدیدکننده باید نام مستعار و ایمیل خود را وارد کند. ستون سمت راست نشان می دهد که چند نفر وارد چت شده اند. فن آوری های مورد استفاده: PHP، MySQL، jQuery، CSS.

35. اجرای صفحه "پیشنهاد پروژه"

بازدیدکنندگان می توانند یک پیشنهاد جدید اضافه کنند یا به پیشنهاد موجود رای دهند. یک راه حل عالی برای کسانی که می خواهند نظر مخاطبان خود را در مورد سایت بدانند. همچنین، از این صفحه می توان برای جمع آوری ایده های جدید برای توسعه بیشتر پروژه خود استفاده کرد. فن آوری های مورد استفاده: PHP، MySQL، jQuery، CSS

36. پیاده سازی Voting/Polling با PHP و jQuery

37. رای دادن به Ajax "TinyEditor"

اجرای دقیق نظرسنجی ها در سایت. فن آوری های مورد استفاده: jQuery، Ajax، PHP و MySQL.

یک راه حل بسیار جالب برای اجرای رأی گیری در سایت. با بالا و پایین کشیدن بلوک ها، گرفتن تصاویر با ماوس، می توانید آنها را به هر ترتیبی در صفحه مرتب کنید. هر چه بلوک را بالاتر ترک کنید، امتیاز بهتری به آن داده می شود و بر این اساس، اگر بلوک در پایین ترین قسمت قرار گیرد، به این معنی است که شما کمترین آن را دوست داشته اید. بعد از اینکه بلوک ها را به ترتیب دلخواه مرتب کردید، باید روی دکمه "ارسال نظرسنجی" کلیک کنید تا رای در نظر گرفته شود. صفحه نتایج نتایج رای گیری و تعداد بازدیدکنندگانی که رای داده اند را نشان می دهد. فن آوری های مورد استفاده: CSS، PHP، MySQL، jQuery.

یک سیستم نظردهی ساده آژاکس با اعتبارسنجی اطلاعات وارد شده. نظرات در یک پایگاه داده ذخیره می شوند. پیاده سازی شده با استفاده از: PHP، MySQL، CSS، jQuery.

40. شمارنده دانلود فایل

41. یادداشت های صفحه با استفاده از PHP

فناوری های مورد استفاده: PHP، jQuery، CSS.

وقتی در میان آیتم های منو پیمایش می کنید، محتوا بدون بارگیری مجدد صفحه بارگیری می شود. فن آوری های مورد استفاده: PHP، jQuery، CSS.

43. جستجوی سایت جی کوئری با استفاده از فناوری گوگل

پیاده سازی جستجوی سایت با استفاده از Google AJAX Search API. شما می توانید این فرصت را برای بازدید کننده فراهم کنید که هم در سایت خود و هم در اینترنت جستجو کند. در عین حال، جستجو را می توان نه تنها در صفحات سایت، بلکه در تصاویر و فایل های چند رسانه ای نیز انجام داد.

44. توضیحات همپوشانی jQuery روی جلوه تصویر

اثر بسیار جالب، می تواند در اجرای نمونه کارها استفاده شود. وقتی روی یک تصویر کلیک می‌کنید، با پس‌زمینه‌ای شفاف تیره می‌شود و توضیحی با توضیح آنچه باید به آن توجه کنید ظاهر می‌شود.

45. پیاده سازی صفحه پرسش و پاسخ با جی کوئری

پیاده سازی jQuery صفحه پرسش و پاسخ در سایت. لیستی از سوالات در بالای صفحه نمایش داده می شود. هنگامی که روی یک سوال کلیک می کنید، صفحه به آرامی به سوالی که انتخاب کرده اید پیمایش می کند و سوال فعال با پاسخ به آن با رنگ دیگری برجسته می شود. پیوندی برای بازگشت به لیست سوالات نیز در قسمت پاسخ فعال ظاهر می شود.

46. وب سایت در Ajax. محتوا بدون بارگیری مجدد صفحه بارگیری می شود

47. رنگ پس زمینه و متن را با جی کوئری تغییر دهید

هنگامی که ماوس را روی ماوس قرار می دهید، رنگ تغییر می کند. می توانید رنگ را به صورت تصادفی تغییر دهید.

48. راهنمای سایت با استفاده از جی کوئری

با استفاده از این افزونه جالب می توانید در صورتی که بازدیدکننده برای اولین بار به سایت خود مراجعه کرده باشد، کارکردهای اصلی سایت خود را معرفی کنید. هنگامی که صفحه بارگیری می شود، یک بلوک در گوشه سمت راست بالا ظاهر می شود که یک پیشنهاد برای بازدید از سایت دارد. اگر بازدیدکننده ای برای اولین بار است که از سایت شما بازدید می کند، می تواند از یک راهنمای کوچک برای آشنایی با ویژگی های اصلی استفاده کند. در این حالت صفحه تاریک می شود و بلوک های لازم در هر مرحله با علامت مشخص می شوند. اگر بازدیدکننده قبلاً از سایت شما بازدید کرده باشد، می تواند به سادگی پنجره ارائه یک تور از سایت را ببندد.

49. گشت مجازی در سایت "Joyride Kit"

با استفاده از این افزونه می توانید کاربر را با عملکرد اصلی صفحه آشنا کنید. این کار در قالب یک توضیحات پاپ آپ متوالی از عناصر انجام می شود. بازدیدکننده می‌تواند با کلیک بر روی دکمه Next تمام نکات را ببیند، یا تور آنلاین را ببندد (اگر اولین باری نیست که در این صفحه فرود می‌آید) با استفاده از ضربدر.

");