در این آموزش ، من به شما نشان می دهم که چگونه یک مینیمالیستی در عین حال راحت و کاربردی ایجاد کنید گالری عکس در jQueryیا گالری تصاویر ، آن را برای هر کسی مناسب است. این گالری توانایی ایجاد دسته ها را دارد و پس از آن فیلتر می شود. همچنین می توان یک نمایش پرده ای را راه اندازی کرد. این گالری در همه مرورگرها کار می کند ، بنابراین مشکلی برای سازگاری وجود نخواهد داشت.
برای ایجاد این گالری از دو کتابخانه رایگان استفاده می شود جی کوئری: Quicksandو PrettyPhoto... آنها ایجاد گالری را بسیار آسان تر می کنند. مثل همیشه ، می توانید نتیجه کار را در صفحه نمایشی مشاهده کنید ، همچنین بایگانی را از گالری کار و کلیه پرونده های منبع بارگیری کنید. تنها اشکال ، اگر ممکن است چنین بگویم ، ایجاد دستی تصاویر کوچک برای تصاویر بزرگ است. در غیر این صورت ، این گالری شایسته توجه است
منابع
نشانه گذاری HTML
اول ، اجازه دهید نگاهی به پانل با یک لیست از مقوله ها بیندازیم ، این یک لیست بولت ul است. علاوه بر این ، هر عنصر لیست باید یک نام کلاس منحصر به فرد داشته باشد.
- دسته بندی ها:
- همه
- دسته 1
- دسته 2
- دسته 3
- دسته 4
نام تصویر
همانطور که گفته شد موارد لیست ، تصاویر موجود در گالری است. هر عنصر لیست شامل موارد مرکب است. این خود تصویر است یا به عبارت دقیق تصویر کوچک آن و همچنین توضیحی. تصویر کوچک پیوندی به تصویر اصلی است. ویژگی rel برای تماس با جاوا اسکریپت و باز کردن تصویر اصلی لازم است.
همچنین در مورد 2 نکته مهم را فراموش نکنید ، ویژگی داده شناسه عنصر لیست باید بی نظیر باشد. ویژگی داده نوع شامل کلاس طبقه بندی می باشد ، لیستی که من در بالا توضیح دادم. همه چیز در مورد نشانه گذاری است.
سبک های CSS
من به سبک ها توجه نخواهم کرد ، زیرا ما از یک کتابخانه آماده استفاده می کنیم PrettyPhoto، که وظیفه افزایش تصویر را بر عهده دارد ، و کد css زیادی نیز در آن وجود دارد. با این وجود شایان ذکر است که 5 گزینه برای طراحی تصویر بزرگ شده وجود دارد ، گرچه در حالت ایده آل فقط 3 ، از آنجا که در دو گزینه فقط گرد کردن حذف می شود.
بنابراین ، من فقط سبک های CSS را برای تصاویر کوچک و لیستی از دسته ها نشان خواهم داد.
نمونه کارها دسته بندی (حاشیه پایین: 30px؛)
.portfolio-categ li (
نمایش: درون خطی؛
حاشیه سمت راست: 10px؛
}
.image-block (
نمایش: بلوک؛
موقعیت: نسبی؛
}
.image-block img (
مرز: 1px جامد # d5d5d5؛
مرز-شعاع: 4px 4px 4px 4px؛
زمینه: #FFFFFF؛
بالشتک: 10px؛
}
.image-block img: شناور (
مرز: 1px جامد # A9CF54؛
کادر-سایه: 0 0 5px # A9CF54؛
}
.portfolio-area li (
شناور به سمت چپ؛
حاشیه: 0 12px 20px 0؛
سرریز: پنهان؛
عرض: 245px؛
بالشتک: 5px؛
}
.home-portfolio-text (حاشیه بالا: 10px؛)
li.active a (متن-دکوراسیون: برجسته؛)
در اصل ، همه چیز باید با سبک روشن باشد. برای ترسیم طبقه بندی ها ، ویژگی نمایش نمایش داده می شود. برای اینکه اثر سکته مغزی به تصویر بدهید ، رنگ پس زمینه (سفید) و یک ضخامت 10 پیکسل را تنظیم کنید. آیتم های لیست در منطقه .portfolio-li اندازه هستند.
جی کوئری
و در آخر ، مهمترین چیز ، پس از آن برای کل درس. این کد jQuery است. بیایید با فیلتر کردن تصاویر بر اساس طبقه بندی شروع کنیم.
// کلیه کودکان منطقه نمونه کارها را انتخاب کنید و به متغیر بنویسید
داده $ var \u003d $ (". نمونه کارها منطقه"). کلون ()؛
$ (". portfolio-categ li") کلیک کنید (عملکرد (e) (
$ (". filter li"). removeClass ("فعال")؛
Var filterClass \u003d $ (این) .attr ("کلاس"). تقسیم ("") .slice (-1)؛
اگر (filterClass \u003d\u003d "همه") (
var $ filteredData \u003d $ data.find (". portfolio-item2")؛
) دیگری (
var $ filteredData \u003d $ data.find (". portfolio-item2")؛
}
$ (". نمونه کارها منطقه"). Quicksand ($ filteredData ، (
مدت زمان: 600 ،
تنظیم قد: "خودکار"
)، تابع () (
LightboxPhoto ()؛
});
$ (این) .addClass ("فعال")؛
بازگشت به دروغ؛
});
با استفاده از روش clone () و انتخاب کننده ، همه فرزندان منطقه .portfolio-area را انتخاب می کنیم و آنها را در متغیر data data می نویسیم. در مرحله بعد ، کلیک را روی یکی از دسته ها ، عنصر لیست موجود با کلاس .portfolio-categ دنبال می کنیم. ما با حذف removeClass ("فعال") همه دسته ها را غیرفعال می کنیم ، اگر این کار انجام نشود ، با گذشت زمان همه دسته ها فعال خواهند شد و فیلتر متوقف می شود.
از آنجا که روی مورد لیست کلیک می کنیم ، انتخاب کننده این شامل آیتم لیست است ، یعنی لی ، مقدار ویژگی کلاس را از آن می گیریم و از روش تقسیم برای تقسیم نام کلاس به چند قسمت استفاده می کنیم ، مرز یک فضا است (یعنی اگر کلاس بود. پس از تقسیم ، مجموعه ای از "همه" و "فعال" می گیریم). و سپس با استفاده از روش برش ، اولین عنصر آرایه (در مورد ما "همه") را انتخاب می کنیم و نتیجه نتیجه را در متغیر filterClass می نویسیم. اگر فضایی وجود نداشته باشد ، نام کلاس تغییر نخواهد کرد.
بعد ، ما بررسی می کنیم که آیا متغیر filterClass شامل رشته است یا خیر همه، سپس با استفاده از متد .find ، همه موارد را با نمونه کارها class2 از آیتم $ data که در بالا بحث کردیم ، انتخاب می کنیم. عناصر انتخاب شده (و اینها همه عناصر لیست هستند ، یعنی تمام تصاویر) در متغیر filteredData قرار می گیرند.
در غیر این صورت ، اگر filterClass مساوی نیست همه، سپس در متغیر filterData همه عناصر لیست را قرار نمی دهیم ، بلکه فقط آنهایی را که ویژگی داده نوع آنها با کلاس طبقه مطابقت دارد ، قرار می دهیم. به طور خلاصه ، موارد فقط یک دسته هستند.
و در پایان متغیر حاصل را به کتابخانه منتقل می کنیم جی کوئری، که تصاویر را فیلتر می کند. این همه مربوط به فیلتر است.
اکنون برای بزرگنمایی تصویر در پنجره باز شده. همه چیز در اینجا بسیار ساده تر است.
JQuery ("a") PrettyPhoto ((
animationSpeed: "سریع" ،
نمایش پرده ای: 5000 ،
موضوع: "facebook" ،
show_title: false،
overlay_gallery: false
});
یک کلیک بر روی پیوندی که ویژگی rel با آن شروع می شود بسیار زیبا است. سپس كتابخانه وارد بازی می شود عکس زیباو تصویر به طرز معجزه آسایی بزرگ شده است. به هر حال ، ما همچنین در چند پارامتر عبور می کنیم. مانند سرعت انیمیشن - سریع ، تأخیر در نمایش اسلاید - 5 ثانیه ، موضوع فیس بوک (در کل پوشه تصاویر / 5 موضوع در کل وجود دارد) و همچنین نمایش نام تصویر و بزرگ کردن تصویر هنگام سوار کردن ماوس ممنوع است.
مدت طولانی است که موضوع را برای موضوع امروز انتخاب کردم. در نتیجه ، من متوجه شدم که ما هنوز انتخابی نکرده ایم گالری تصاویر... از نظر من ، یک موضوع عالی است گالری در بسیاری از سایتها حضور دارند راستش ، همه آنها خیلی جذاب نیستند. با توجه به روندهای توسعه فعلی جی کوئری ، html5 من فکر کردم که راه حل ها از قبل باید جذاب تر از راه حل هایی باشند که قبلاً با آنها روبرو شده ام. بنابراین. بعد از گذراندن یک روز ، موفق شدم تعداد زیادی از اسکریپت ها را پیدا کنم. از این کل کوه ، تصمیم گرفتم فقط انتخاب کنم ، زیرا دوست دارم ، همانطور که قبلاً از پست های قبلی متوجه شده اید.
گالری عکس قابل اجرا نه تنها در مورد با آلبوم های عکس... فکر می کنم از این فیلمنامه نیز استفاده شود ، به همین ترتیب ، حتی صحیح تر نیز خواهد بود نمونه کارها برای عکاسان ، طراحان و غیره. جلوه های جی کوئری
به جلب توجه بازدید کنندگان و افزودن ظرافت به وب سایت شما کمک خواهد کرد.
بنابراین. به مجموعه توجه شما پلاگین های گالری تصاویر جی کوئری برای وب سایت.
یادآوری و یادآوری را فراموش نکنید ، تا این مجموعه از بین نرود ، می توانید با کلیک روی ستاره در انتهای مقاله ، آن را به موارد دلخواه خود اضافه کنید.
عکس
گالری عکس رایگان ، سبک وزن و پاسخگو، که در آن همه اثرات ، انتقال با استفاده از css3 انجام می شود. ایده آل برای ایجاد یک وب سایت عکاسی.
گالری S
جذاب افزونه گالری تصاویر جی کوئری... این انیمیشن با css3 کار می کند.
DIAMONDS.JS
اصلی افزونه برای ایجاد یک گالری عکس... مینیاتورها مانند هستند الماس، که در حال حاضر بسیار محبوب است این فرم با استفاده از css3 ساخته شده است. تنها اشکال این گالری عدم وجود سبد است که می تواند یک عکس را در اندازه کامل باز کند. یعنی باید پلاگین سبد را با خرچنگ پیچ کنید. این اسکریپت یک شبکه الماس سازگار با تصاویر ایجاد می کند.
سوپر باکس
گالری تصاویر مدرن با استفاده از جی کوئری ، css3 و html5... همه ما به این واقعیت عادت کرده ایم که وقتی روی پیش نمایش کلیک می کنید ، تصویر کامل در یک سبد (پنجره بازشو) باز می شود. توسعه دهندگان این افزونه تصمیم گرفتند که سبد منسوخ شده باشد. تصاویر در این گالری در زیر پیش نمایش باز شده است. نسخه ی نمایشی را بررسی کنید و مطمئن شوید که این راه حل بسیار مدرن تر به نظر می رسد.|
گالری صاف مورب محو
گالری تصاویر مدرن که در آن پیش نمایش ها در کل فضای صفحه پخش می شود... اسکریپت می تواند یک پوشه را با یک عکس روی سرور اسکن کند ، یعنی نیازی به وارد کردن هر تصویر به طور جداگانه نیست. کافی است که تصاویر را در یک پوشه روی سرور بارگذاری کنید و مسیر را در فهرست تنظیمات مشخص کنید. سپس فیلمنامه به تنهایی همه کارها را انجام می دهد.
گالری گاما
گالری عکس شیک ، سبک و پاسخگو با یک شبکه به سبک Pinterest که هم اکنون بسیار محبوب است. این اسکریپت هم در رایانه های ثابت و هم خوب کار می کند دستگاه های تلفن همراه با وضوح صفحه نمایش یک راه حل عالی برای ایجاد یک نمونه کارها برای طراحان وب.
شبکه THUMBNAIL با پیش نمایش گسترده
افزونه است شبکه تصویر پاسخگو... هنگامی که در زیر کلیک می کنید ، عکس بزرگتر و توضیحی نمایش داده می شود. خوب برای ایجاد یک نمونه کارها.
گالری
جی گالری است صفحه نمایش کامل ، گالری عکس پاسخگو... جلوه ها ، انتقال ها و حتی سبک به راحتی قابل تنظیم هستند.
Glisse.js
افزونه ساده و در عین حال بسیار مؤثر گالری تصاویر. این دقیقاً همان راه حل است وقتی شما نیاز به ایجاد یک آلبوم عکس دارید. این افزونه از آلبوم ها پشتیبانی می کند و جلوه ای بسیار جالب دارد.
جریان موزاییک
ساده ، پاسخگو گالری تصاویر با شبکه به سبک Pinterest.
گالریا
یکی دیگر از گالری های شیک با یک شبکه به سبک Pinterest که بر اساس طبقه بندی فیلتر می شود. در مرورگرها کار می کند: Chrome ، Safari ، Firefox ، Opera، IE7 +، مرورگر Android، موبایل Chrome ، موبایل Firefox.
حداقل
عالی گالری عکس رایگان با استفاده از JQUERY ، 5 و CSS3. ظاهری بسیار جذاب دارد و مطمئناً مورد توجه بازدید کنندگان شما قرار خواهد گرفت.
flipLightBox
یک گالری ساده از تصاویر. هنگامی که روی پیش نمایش کلیک می کنید ، تصویر کامل در سبد باز می شود.
گالری blueimp
گالری انعطاف پذیر. قادر به نمایش در یک پنجره معین نه تنها تصاویر ، بلکه همچنین فیلم... در دستگاه های لمسی عالی کار می کند. سفارشی سازی آن بسیار آسان است و امکان گسترش عملکرد با افزونه های اضافی نیز وجود دارد (به پلاگین بعدی مراجعه کنید).بارها گالری تصاویر مختلف را مرور کردم ، مجموعه گسترده ای از نمایش پرده های دیدنی و پلاگین ها را جمع کردم. همچنین در بانک پیگگی ، منحصراً در CSS3 ، بدون اتصال کتابخانه های اضافی js ، Lighbox نیز وجود دارد. اما زمان همچنان باقی نمی ماند ، کاربران به طور فزاینده ای از دستگاه های مختلف تلفن همراه برای گشت و گذار در اینترنت استفاده می کنند ، به این معنی که سازگاری عناصر وب و به ویژه گالری های عکس با اثر "" در حال تبدیل شدن به یکی از اولویت هایی است که طراحان وب و توسعه دهندگان باید به آن توجه کنند.
در اینجا مجموعه دیگری از 15 افزونه jQuery پاسخگو ارائه شده است که هم با مرورگرهای رومیزی دوستانه هستند و هم کاملا در صفحه نمایش دستگاههای مختلف تلفن همراه (لپ تاپ ، تلفن هوشمند ، تبلت و غیره) قرار می گیرند.
نسخه نمایشی را در سایت های توسعه دهندگان مشاهده کنید ، افزونه مورد نظر خود را بارگیری کنید و ایجاد کنید ، ایجاد کنید ، ایجاد کنید ...
1.iLightbox
iLighbox یک پلاگین سبد جی کوئری سبک وزن با پشتیبانی گسترده ای است انواع متفاوت پرونده ها: تصاویر ، فیلم ها ، Flash / SWF ، محتوای آژاکس ، فریم ها و نقشه های جاسازی شده. این افزونه همچنین دکمه هایی را اضافه می کند شبکه های اجتماعیبه کاربران امکان می دهد محتوا را از طریق فیس بوک ، توییتر یا Reddit به اشتراک بگذارند. فرصت عالی برای سازماندهی نمایش اسلایدهای دیدنی ، گالری تصاویر و فیلم ها ، با مشاهده در حالت های معمولی و تمام صفحه.
iLighbox بسیار هوشمندانه کار می کند و وقتی در دستگاه های تلفن همراه مشاهده می شود ، بیش از نمایش محتوای پردازش شده به درستی نمایش می دهد. از جمله موارد دیگر ، با استفاده از این افزونه ، می توانید نمایش بلوک های اطلاعاتی را به عنوان یک پنجره معین به راحتی پیاده سازی کنید.
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE7 + ، Chrome ، Firefox ، Safari و Opera
- مجوز: و شیطان فقط می داند)))
2. SwipeBox
ضربه تند وشدید زدن یک افزونه jQuery با پشتیبانی است صفحه لمسی سیستم عامل های تلفن همراه علاوه بر تصاویر ، این افزونه از فیلم های جاسازی شده از یوتیوب و Vimeo پشتیبانی می کند. Swipebox برای پیوستن به هر پروژه ای بسیار آسان است ، این افزونه چندین گزینه شهودی برای شخصی سازی عملکرد و رفتار آن دارد. در وب سایت توسعه دهنده ، مستندات مفصلی در مورد اتصال و استفاده از افزونه وجود دارد ، بدون آب غیر ضروری ، همه چیز درست است ، بنابراین من فکر می کنم درک این مسئله که مشکلی ، کجا و چرا وجود نخواهد داشت دشوار نخواهد بود.
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE9 + ، Chrome ، Safari ، Firefox ، Opera، IOS4 +، Android و Windows Phone
- مجوز: من تعیین نکرده ام ، شاید شما خوش شانس باشید)))
3. MagnificPopup
یک افزونه شناخته شده و اثبات شده از سبد سبک مبتنی بر jQuery یا Zepto.js. نویسنده این افزونه دمیتری سمنوف است که سازنده افزونه PhotoSwipe است که من در زیر در مورد آنها صحبت خواهم کرد. به عنوان یک افزونه jQuery / Zepto ارائه شده است ، دارای ویژگی های پیشرفته تری است که در PhotoSwipe یافت نمی شود ، مانند پشتیبانی ویدیویی ، نمایش نقشه ها و محتوای Ajax و اجرای ویندوزهای معین با فرم های داخلی. طبق همه معیارها ، این یک ابزار عالی دیگر در قفس توسعه دهنده وب است. به طور جداگانه افزونه ای برای WordPress و مستندات دقیق در مورد پیکربندی و استفاده وجود دارد. فقط فقدان مستندات در روسی افسرده کننده است ، قضاوت بر اساس نام و نام خانوادگی است ، نویسنده به نظر می رسد روسی است ، هرگز به دلیل مضر بودن این ، یا به دلیل آگاهی خیالی از زیرکی خود ، اما هرگز فهمیده نشده است. خوب ، خوب ، چه کسی باید آن را بفهمد ، ما نیز چای نرم نیستیم))).
- وابستگی: jQuery 1.9.1+ یا Zepto.js
- پشتیبانی از مرورگر: IE7 (جزئی) ، IE8 + ، Chrome ، Firefox ، Safari و Opera
- مجوز: مجوز MIT
4. PhotoSwipe
- وابستگی: Javascript یا jQuery
- پشتیبانی از مرورگر
- مجوز: مجوز MIT
11. FeatherLight
افزونه 6 کیلوبایت سبکی برای توسعه دهندگان کم و بیش باهوش ، مجهز به بیشترین امکانات توابع ضروری... علاوه بر پشتیبانی از انواع مختلف محتوای متداول (متن ، تصاویر ، iframe ، آژاکس) ، امکان اتصال یک مورد دیگر نیز وجود دارد ، همچنین می توانید پسوند خود را برای این افزونه توسعه دهید که در هنگام ایجاد یک پروژه جدید نیازهای شما را کاملاً برطرف کند. چگونه این اقتصاد (توسعه برنامه افزودنی) کار می کند ، من به خصوص در این زمینه تحقیق نکردم ، اما کسانی که این افزونه در آنها وارد می شود ، فکر می کنم آنها آن را کشف کنند))).
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE8 + ، Chrome ، Firefox ، Safari و Opera
- مجوز: مجوز MIT
12. LightGallery
لایت گالری - پلاگین سبد چند منظوره با بسیاری فرصت های اضافی... با بیش از 20 گزینه برای سفارشی کردن کوچکترین جزئیات Lightbox همراه است. همه چیز وجود دارد ، خوب ، یا تقریبا همه چیز)). یک گالری تصویر کامل با تصاویر کوچک مرتب ، کنترل های پیمایش و پیمایش تصاویر کوچک. نشانه گذاری ساده html به عنوان یک لیست بدون کنترل
- با استفاده از ویژگی data-src برای تصاویر با اندازه کامل. با فیلم های یوتیوب و ویمئو نیز همین است. به طور کامل از تمام قالب های ویدیویی HTML5 ، MP4 ، WebM ، Ogg ... تصاویر کوچک متحرک ، طرح پاسخگو با پشتیبانی از دستگاه های تلفن همراه ، جلوه های اسلاید و انتقال صاف از ظاهر هنگام تعویض تصاویر و سایر مطالب پشتیبانی می کند. ظاهر آسان به شکل و سفارشی کردن با CSS. بارگیری تصویر و بهینه سازی کد. پیمایش با استفاده از صفحه کلید دسک تاپ و همچنین امکان استفاده از آیکون های فونت اضافی. لایت گالری - اینجاست که "ترکیب" واقعی است ، نکته اصلی این نیست که به وفور تنظیمات و امکانات گسترده این افزونه گم شوید.
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE7 + ، Chrome ، Firefox ، Safari ، Opera ، iOS ، Android و Windows Phone
- مجوز: مجوز MIT
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE7 + ، Chrome ، Firefox ، Safari ، Opera ، iOS 5+ و Android 3+
- مجوز: مجوز Creative Commons BY-NC-ND 3.0
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE9 + ، Chrome ، Firefox ، Safari و Opera
- مجوز: مجوز MIT
- وابستگی: jQuery
- پشتیبانی از مرورگر: IE9 + ، Chrome ، Firefox ، Safari ، Opera
- مجوز: مجوز MIT
- سادگی نصب ، پیکربندی و استفاده علاوه بر jQuery ، شما نیز نیاز دارید فقط 2 پرونده را وصل کنید، و برای نمایش گالری ، فقط باید پیوند تصاویر را مشخص کنید.
- کمی تأثیر می گذارد سرعت بارگیری سایت
- تطبیق پذیری... گالری شما از نظر تلفن ، لپ تاپ و حتی روی صفحه تلویزیون شما خوب به نظر می رسد.
- فراوانی از تنظیمات و عملکردها ، به طور جداگانه از طریق ویژگی های برچسب های HTML متصل می شوند.
- پشتیبانی از دستگاه های لمسی.
- حمایت کردن فیلم.
- امکان پذیری بارگیری تنبل تصاویر.
- و بسیاری موارد دیگر که کاربر پیشرفته را خوشحال می کند.
- عدم پشتیبانی کاربر. احتمال اینکه مشکل شما برطرف شود یا برطرف شود تقریباً صفر نیست. این بد است ، اما کشنده نیست.
- در حال بررسی jQueryقابل اعتماد و متخصص منبع سایت (میانبر صفحه کلید Ctrl + U) → سعی در یافتن چیزی شبیه به این خط: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js
برای جستجوی آسان تر از Ctrl + F استفاده کنید. اگر خط آرزو وجود ندارد ، باید jQuery را نیز در آن وارد کنید. در وردپرس ، این کار را می توانید با وارد کردن کد زیر در پرونده های function.php موضوع خود انجام دهید. در حقیقت ، این فیلمنامه برای درگیری ها استفاده می شود نسخه های مختلف jQuery و مطابق با طرح زیر عمل می کند: jQuery را که قبلاً ثبت شده است حذف می کند ، یک نسخه جدید را ثبت می کند ، اسکریپت را نمایش می دهد. نسخه های فعلی کتابخانه jQuery را می توان در اینجا یافت.
فقط می توانید خطی مثل این را وارد کنید
و : <اسکریپت src \u003d "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> اسکریپت\u003e - شامل fotorama.css و fotorama.js هستیم.کد زیر را بین برچسب ها بچسبانید و ، در وردپرس این کار در پرونده header header (header.php) انجام می شود. "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel \u003d "شیوه نامه"\u003e
- На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".
- Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
- Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
- Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "؛) add_shortcode (" عکس "،" sd ")؛
- اکنون ، هنگام نوشتن مقاله ، در پایان ، کد کوتاه را وارد کنید
برای کسانی که به یک اسلایدر مناسب نیاز دارند ، توصیه می کنم از همان توسعه دهندگان نیز به آنها توجه کنید.
13. StripJS
غیر معمول ، حتی می گویم: اجرای غیرمعمول یک سبد یا به عبارت بهتر ، نمایش کاملاً آشنا از مطالب ، وقتی یک تصویر یا فیلم ، در طراحی یک سبد لبه ، در سمت راست ظاهر می شود ، نه تمام صفحه را پر می کند ، بلکه فقط برای اندازه معینی از یک تصویر یا فیلم با اندازه کامل. در صفحه های بزرگ این رویکرد قابل درک است ، امکان تعامل با صفحه وجود دارد. در صفحه نمایش های کوچک دستگاه های تلفن همراه ، این کل طراحی خلاقانه یکپارچه به سبد کلاسیک منتقل می شود. ایده جالب است ، نسخه ی نمایشی را تماشا کنید ، شاید شخصی مانند این درج کند.
14. LightLayer
افزونه ای آسان برای استفاده از سبد سبک که با هر پروژه ای خوب پیش می رود و در هر صفحه ای نیز خوب به نظر می رسد. افزونه LightLayer کنترل بسیاری از تنظیمات ، از جمله تغییر رنگ پس زمینه و میزان شفافیت آن ، موقعیت بلوک پایه ، انتخاب جلوه های انتقال هنگام باز / بسته شدن ، عملکردهایی را که کاربران می توانند به تنهایی دستکاری کنند ، فراهم می کند. این افزونه با محتوای وب سایت خارجی ، پخش کننده های ویدیویی و نقشه ها بسیار عالی کار می کند.
15. FluidBox
Fluidbox یک پلاگین سبد اختصاصی برای تصاویر است. تعداد تغییرات ممکن در ارائه تصویر واقعاً چشمگیر است. این افزونه با تصاویر در طراحی های مختلف ، از جمله تصاویر شناور ، تصاویر با موقعیت مطلق ، تصاویر و عکس های دارای قاب و در داخل ، با تصاویر واحد بسیار عالی کار می کند و در یک گالری ترکیب می شود. به طور کلی ، ریختن آب بیهوده است ، اما نقاشی همه امکانات این افزونه در یک ارائه کوتاه هنوز کاربرد نخواهد داشت ، بنابراین شما بهتر است نسخه ی نمایشی ، پیچ و تاب و پیچ و تاب را تماشا کنید و فکر می کنم بسیاری از این افزونه را دوست دارند.
این احتمالاً همه است! امیدوارم که این مرور کوتاه به شما کمک کند تا کالاهای پیشنهادی برای توسعه وب را درک کنید. می خواهم توجه داشته باشم که من از تمام افزونه های ارائه شده در مجموعه در پروژه های کاری استفاده نکرده ام ، اکثر آنها را در سایت های آزمایشی یا لاک الکل بررسی کرده ام ، بنابراین اگر هر گونه سؤالی پیش آمد ، ما به احتمال زیاد آنها را با هم حل خواهیم کرد ، اما با هم ، مثل همیشه. ما موفق خواهیم شد
به دنبال یک الگوی مناسب زبان روسی برای اهداف خود هستید؟ در این حالت ، احتمالاً باید از بازار TemplateMonster دیدن کنید. به همین دلیل که اخیراً بخش جدیدی از قالب ها در سایت ظاهر شده است. اکنون هر کاربر می تواند با این مجموعه که به روزرسانی و به روز خواهد شد ، آشنا شود. متن های این الگوها با دست نوشته شده اند. اما این تنها علاوه بر داده ها نیست. راه حل های آماده... در واقع ، در بسته های آنها می توانید همه مواردی را پیدا کنید که توسعه یک پروژه آنلاین ، از جمله ویرایشگر تصویری را تسهیل می کند.
با احترام ، اندرو
گالری 1.jQuery با جلوه صفحه
برای نمایش آخرین مقالات وبلاگ یا ارائه محصولات می توان از یک راه حل مشابه استفاده کرد.
روشی بی نظیر برای نمایش عکسهای خود به عنوان یک گالری فانتزی جی کوئری.
3. گالری تصویر محصول jQuery ، پلاگین slideJS
افزونه jQuery برای پیاده سازی یک صفحه محصول با تصاویر متعدد عالی است. انتقال بین تصاویر می تواند با استفاده از ریز عکسها یا با استفاده از فلش های پیمایش انجام شود.
هنگام حرکت مکان نما ماوس روی آن ، تصویر بزرگ شده است.
5. گالری Lightbox زیبا "ppGallery"
6. جی کوئری مینی گالری "Touch-Gallery"
7. گالری تصاویر کوچک jQuery
گالری حرفه ای جی کوئری 2011.
8. افزونه jQuery "Nivo Zoom"
افزونه jQuery با کیفیت دیگر از توسعه دهندگان کشویی Nivo. با کلیک روی تصویر کوچک تصویر را افزایش دهید.
9. jQuery گالری تصاویر 3D
گالری جدید جی کوئری سال 2011. نوار تصویر به عرض کامل صفحه کشیده شده است. می توانید از سه طریق بین عکس ها حرکت کنید: با استفاده از چرخ ماوس ، با پیمایش از بالای گالری و استفاده از بلوک تصویر بند انگشتی در پایین. این گالری بسیار چشمگیر به نظر می رسد.
تصاویر موجود در گالری بطور تصادفی زوم شده و خارج می شوند تا جلوه حبابی ایجاد کنند.
11. نمایش غیرمعمول تصاویر در گالری jQuery
از نوار لغزنده در بالا استفاده کنید تا فاصله بین تصاویر در پشته تغییر یابد. وقتی روی یک تصویر کلیک می کنید ، می چرخد.
12. افزونه jQuery "MB.Gallery"
گالری 13.jQuery که به صفحه کامل کشیده شده است
پلاگین 2011. یک گالری جدید با توصیف تصاویر ، بدون در نظر گرفتن اندازه آن ، در کل منطقه پنجره مرورگر امتداد دارد. ریز عکسها به روشی جالب اجرا می شوند. انتقال بین عکسها با استفاده از فلش در نزدیکی مینیاتور و با استفاده از چرخ ماوس انجام می شود.
14. گالری jQuery سبک
این افزونه به طور خودکار پوشه را اسکن می کند و کپی ریز تصاویر را ایجاد می کند.
16. گالری شیک با استفاده از کتابخانه های jQuery و رافائل
اثر جالب وقتی روی تصویر کوچک شناور هستید.
17. نسخه جدید پلاگین jQuery "Supersized" نسخه 3.1
اخیراً ، من این راه حل jQuery را برای ایجاد گالری های تمام صفحه ذکر کردم. امروز می خواهم شما را معرفی کنم آخرین نسخه این افزونه حرفه ای اسکریپت کاملاً بازنویسی شده است ، اکنون این گالری حتی سریعتر نیز انجام شده است ، در حالی که برخی از تنظیمات جالب اضافه شده است ، به عنوان مثال ، پیمایش با صفحه کلید ، سرعت متغیر تغییر تصاویر ، اندازه صفحه نمایش و موارد دیگر.
افزونه 18.jQuery "Galleria 1.2.2"
گالری jQuery جدید برای پروژه های شما.
گالری با کلیک بر روی یک دکمه در صفحه ظاهر می شود. تصاویر کوچک در اطراف تصویر بزرگنمایی نشان داده می شوند. می توانید تغییر خودکار تصاویر را کنترل کنید. فن آوری های مورد استفاده: jQuery، CSS، PHP.
20. افزونه "گالری تایمر"
گالری jQuery. در صورت وجود تعداد زیادی از اسلایدها و پیمایش تصاویر کوچک در صورت خودکار ، پیاده سازی شده است.
افزونه گالری تصاویر در jQuery.
22. گالری جاوا اسکریپت برای مشاهده در دستگاه های تلفن همراه "PhotoSwipe"
گالری تصاویر برای مشاهده در دستگاه های تلفن همراه (تلفن یا رایانه لوحی) بهینه شده است.
23. گالری جاوا اسکریپت با جلوه سه بعدی
24. گالری "گالری morphing jQuery"
جدید کشویی jQuery... چندین اثر متحرک جالب هنگام تغییر اسلایدها.
25. افزونه jQuery "Galleria 1.2.3"
26. دیوار تصویر jQuery
یک گالری اصلی به شکل ریز عکسها در اندازه های مختلف پراکنده در صفحه ، به عنوان نقاشی های سبک. وقتی روی تصویر کوچک کلیک می کنید ، ناحیه ای با توضیحات تصویر ظاهر می شود و هنگامی که دوباره کلیک می کنید ، اصلی ظاهر می شود تصویر بزرگ.
27. گالری CSS3
اثر شناور جالب.
28. گالری با مینیاتور "TN3 Gallery"
گالری jQyery با ریز عکسها. امکان مشاهده در یک پنجره جمع و جور و در یک پنجره در صفحه نمایش کامل ، و همچنین امکان غیرفعال کردن / فعال کردن تغییر خودکار اسلایدها را اجرا کرده است.
29. شبکه تصاویر "شبکه-گالری"
شبکه تصویر بر اساس عرض پنجره مرورگر کشیده شده است. اثر جذاب جالب: سطر و ستون فعال برجسته شده است.
30. گالری تعویض jQuery
گالری jQuery آسان در چند خط کد.
صفحه نسخه ی نمایشی شامل چندین گزینه برای منوی کشویی ، در سبک های مختلف است. در این منو می توانید موارد زیر را شخصی سازی کنید: Drop Effect ، Drop Effect و همچنین با کلیک کردن یا با حرکت دادن ماوس بر روی یک مورد ، بین رها کردن انتخاب کنید.
31. گالری تصاویر jQuery
گالری jQuery با زیرنویس تصاویر. چندین اثر انتقال اسلایدها. پیمایش بین تصاویر یا با کمک فلش یا با کلیک کردن روی تصویر کوچک انجام می شود.
تصویر و مینیاتورهای آن به شکل محافل ساخته شده است.
33. افزونه jQuery "Portfolio Navigation Image"
یک راه حل اصلی جاوا اسکریپت برای نمونه کارها یک عکاس. پیمایش بین تصاویر با استفاده از فلش های بالا / چپ / راست و با استفاده از مربع های کوچک (تقلید از حرکت در فضای 2D) انجام می شود. می توانید از جلسات مختلف عکس در ردیف های مختلف عمودی گروه بندی کنید و با استفاده از کنترل های پیمایش از طریق آنها حرکت کنید. دمو را مشاهده کنید
34. پلاگین "jmFullZoom"
افزونه مشاهده تصاویر به اندازه کامل پنجره مرورگر. می توان برای نمایش کار نمونه کارها استفاده کرد.
35. کارت عکس
گالری یکپارچه با نقشه گوگل... با کلیک بر روی نماد در گوشه پایین سمت راست می توانید به صفحه کامل گسترش دهید. ایده آل برای سایت های مسافرتی.
36. گالری عکس با ریز عکسها
گالری تصاویر کوچک jQuery.
37. گالری jQuery "Galleriffic"
نمایش اسلاید با ریز عکسها.
38. افزونه نمایش اثر موج جی کوئری CSS3
ارائه موجی از تصاویر و مطالب در یک صفحه. وقتی روی تصویر کوچک کلیک می کنید ، تمام تصاویر بزرگ شده و نام آنها ظاهر می شود. وقتی دوباره آن را فشار دهید ، بلوکی با توضیحات عکس باز می شود.
بسیاری از گزینه ها و تنظیمات نمایش.
42. Plogger
43. یک گالری زیبا و زیبا که در CSS ساخته شده است ، بدون اسکریپت
بسیار خوب به نظر می رسد و در همه مرورگرهای مدرن عالی عمل می کند
می توانید نمایش خودکار اسلایدها (شروع / توقف) را کنترل کنید ، اسلایدها را با استفاده از فلش های صفحه کلید تغییر دهید ، به صورت خودکار عناوین اسلایس را در صورت وجود زیاد تنظیم کنید ، از گالری های چندگانه در یک صفحه ، زیرنویس های اسلایدها ، پشتیبانی از API و امکان ایجاد جلوه های انتقال اسلایدهای خود پشتیبانی کنید
46. \u200b\u200bگالری به عنوان پشته عکس
به این ترتیب باید نتیجه گالری که با شما ایجاد خواهیم کرد. می توانید نسخه ی نمایشی را تماشا کنید و در صورت تمایل نتیجه نهایی گالری را بارگیری کنید.
سلام! امروز در مورد بهترین گالری عکس ، فیلم و عکس کشویی رایگان صحبت خواهیم کرد ، در مورد "قاب عکس" صحبت خواهیم کرد. علیرغم اینکه 2 سال است که از این فیلمنامه پشتیبانی نمی شود و نویسنده به آن روی آورده است پروژه مشابه این عالی عمل می کند و همچنان به چشم شما لطف می کند.
مزایای اصلی (+)
منهای (-)
اولین گزینه برای اتصال Fotorama
این گزینه اتصال ساده ترین است ، اما بهترین آن نیست ، فقط در صورت نیاز به نمایش گالری در اکثر صفحات سایت ، از آن استفاده می شود. مزیت این گزینه استفاده از CDN است.
Второй вариант подключения [шорткод + Autoptimize]
В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.
ایجاد یک گالری به طور مستقیم
گالری با استفاده از کد HTML ارائه می شود ظرف به نظر می رسد مانند این: یا مانند این (شماره گذاری پیوند اختیاری است): اندازه بلوک قاب عکس اندازه تصویر اول است ، سایر تصاویر به نسبت عکس اول مقیاس بندی می شوند. برای اصلاح این وضعیت می توانید ابعاد را به صورت دستی مشخص کنید. تنظیمات دیگری نیز وجود دارد: داده-پهنای \u003d \u003d 98٪ عرض داده-حداکثر \u003d "900" // حداکثر. width data-minheight \u003d "320" // min. ارتفاع داده-حداکثر \u003d "100٪ // حداکثر نسبی. ارتفاع داده-قد \u003d" 100٪ // ارتفاع نسبی Data-nav \u003d "انگشت شست" مسئول ریز عکسها است اما این روش چندان مؤثر نیست ، زیرا فیلمنامه برای تولید تصاویر کوچک باید یکباره تمام عکس ها را بارگیری کند ، بنابراین تهیه نسخه های کوچک از تصاویر از قبل منطقی تر است. وردپرس به طور خودکار ریز عکسها را ارائه می دهد ، ما از آنها استفاده خواهیم کرد. -70x70 را به نام پرونده اضافه کنید تا پیوندی به تصویر بندها بدست آورید (https: //site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https: //site/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg). به طور پیش فرض ، تصویر بند انگشتی 64x64 است. می توانید این پارامتر را با استفاده از پهنای داده-عرض (عرض) و تصویر-شیب (ارتفاع) تنظیم کنید. اگر به تصویر کوچک نیاز دارید تا اندازه خاص خود را داشته باشد ، سپس پارامترهای عرض و ارتفاع را برای پرونده ریز تنظیم کنید: قاب عکس کاملاً از HTML و CSS بهره می برد که عملکرد اسکریپت را بسیار گسترش می دهد. با پیوندها ، بلوک ها ، جداول ، پاراگراف ها ، نوشتن CSS و موارد دیگر کار کنید. در زیر چند نمونه از نحوه کار گالری آورده شده است. اگر قسمت بصری نمایش داده نمی شود ، روی دکمه "نتیجه" کلیک کنید. نمایش / پنهان کردن نمونه ها قلم قلم نوشته ایوانف کلی (DreamerKlim) را در CodePen مشاهده کنید. قلم aVEEVb توسط ایوانوف کلی (DreamerKlim) را در CodePen مشاهده کنید. اضافه کردن یک تصویر بزرگ جداگانه برای حالت تمام صفحه از طریق داده های کامل امکان پذیر است: یا پیوند به تصویر ... هنگام نوشتن مقاله در وردپرس ، ویرایشگر را به حالت متن تغییر دهید و وارد ظرف شوید
نمونه هایی از تنظیمات Fotorama
ابعاد ظروف
مینیاتورها
کد HTML + Fotorama
حالت تمام صفحه
data-permfullscreen \u003d "true" // در پنجره مرورگر data-اجازهfullscreen \u003d "بومی" // مانیتور کامل
دیگر
data-autoplay \u003d "true" // autoplay data-autoplay \u003d "3000" // فاصله بین اسلایدها در ms data-caption \u003d "One" // نظرات برای تصاویر data-keyboard \u003d "درست" // ناوبری پیکان shuffle data \u003d // "صحیح" // تصاویر خارج از حد هستند داده-ناوبری \u003d "بالا" // ریز عکسها در بالا data-loop \u003d "درست" // پیمایش چرخه ای بیایید سعی کنیم همه چیز را به هم وصل کنیم و یک ویدیو اضافه کنیم "برخی نظر 1">
"برخی نظر 2">
برای پیدا کردن کار مورد علاقه شما
