কোনও মোবাইল ওয়েবসাইটে ইশারা-ভিত্তিক চিত্র গ্যালারী যুক্ত করুন

কন্টেন্ট

• শুরু হচ্ছে
• ফটোসুইপ কনফিগার করা হচ্ছে
• কিছু কার্যকর মোবাইল জাভাস্ক্রিপ্ট ইভেন্ট
• স্পর্শ ইভেন্টগুলি - "টাচস্টার্ট, টাচমোভ, টাচেনড, টাচক্যান্সেল"
• অঙ্গভঙ্গি ইভেন্ট - "অঙ্গভঙ্গি স্টার্ট, অঙ্গভঙ্গি, অঙ্গভঙ্গি" (কেবলমাত্র আইওএস)
• স্ক্রিন ওরিয়েন্টেশন - "ওরিয়েন্টেশন পরিবর্তন"
• ডিভাইস মোশন ইভেন্টস - "ডিভাইস মোশন" (কেবলমাত্র আইওএস)
• মোড়ক উম্মচন

অনেক ওয়েবসাইটের একটি সাধারণ প্রয়োজনীয়তা দর্শকদের জন্য চিত্রগুলি ব্রাউজ এবং নেভিগেট করার জন্য একটি সহজ এবং স্বজ্ঞাত উপায়। প্রকৃতপক্ষে, আক্ষরিক অর্থে এখানে কয়েকশ স্ক্রিপ্ট উপলব্ধ রয়েছে যা এটি অর্জন করে।

এই প্রয়োজনীয়তা মোবাইল ওয়েবসাইটগুলির ক্ষেত্রেও সত্য। তবে, অনেকগুলি সমাধান মোবাইল ডিভাইসের চেয়ে ডেস্কটপের জন্য উপযুক্ত। চিত্রগুলির মাধ্যমে আপনার আঙুলটি "সোয়াইপ" করতে ব্যবহার করা এবং চিত্রগুলি জুম করতে এবং ঘোরানোর জন্য বহু-স্পর্শ অঙ্গভঙ্গি ব্যবহার করার মতো বৈশিষ্ট্য অনুপস্থিত।

মোবাইল ব্যবহারকারীরা তাদের ফটো লাইব্রেরিটি বিল্ট-ইন অ্যাপ্লিকেশনগুলির সাথে ব্রাউজ করার জন্য ব্যবহৃত হয় যা তাদের ডিভাইসের অপারেটিং সিস্টেমের সাথে বান্ডিল হয় এবং এটি কেবল ন্যায্য, মোবাইল ওয়েবসাইট বিকাশকারীরা দর্শকদের জন্য এই স্বজ্ঞাত অভিজ্ঞতাটি চেষ্টা করতে এবং প্রতিরূপ করতে।

ফটোসুইপ (কোড কম্পিউটারলভ দ্বারা বিকাশিত) এই কার্যকারিতাটি সহজ করে তোলে। মোবাইলের জন্য অন্তর্নির্মিত আইওএস ফটো ভিউয়ার অ্যাপ্লিকেশন এবং গুগল চিত্র দ্বারা অনুপ্রাণিত, ফটোসুইপ একটি ফ্রি এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্ট ভিত্তিক চিত্র গ্যালারী বিশেষত মোবাইল ডিভাইসগুলিকে লক্ষ্য করে। বর্তমান সংস্করণটি মোবাইল হ্যান্ডসেটগুলিকে ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি, যেমন আইওএস, অ্যান্ড্রয়েড এবং ব্ল্যাকবেরি running চলমান সমর্থন করে এবং এটি ক্রোম, ফায়ারফক্স, সাফারি এবং ইন্টারনেট এক্সপ্লোরার 8 এবং তারপরেও ডেস্কটপ ব্রাউজারগুলিতে চলে। সর্বোপরি, ফটোসুইপ সম্পূর্ণ বিনামূল্যে এবং মুক্ত উত্স।

শুরু হচ্ছে

ফটোসুইপ দিয়ে শুরু করা সহজ। সর্বশেষ প্রকাশটি ডাউনলোড করতে ওয়েবসাইটটি দেখুন এবং ডাউনলোড লিঙ্কটিতে ক্লিক করুন।

বিকল্পভাবে, আপনি রিলিজ এবং এর উত্স কোড ডাউনলোড করতে গিটহাব ঘুরে দেখতে পারেন, একটি সমর্থন সমস্যা উত্থাপন করতে বা সক্রিয়ভাবে প্রকল্পে অবদান রাখতে পারেন!

আপনি যখন মুক্তির প্যাকেজটি সঙ্কুচিত করবেন, আপনি একটি "উদাহরণগুলি" ফোল্ডারটি দেখতে পাবেন, যাতে আপনি অধ্যয়ন করতে এবং অনুসরণ করতে পারেন এমন একটি ডেমোসের সমাহার রয়েছে। এই উদাহরণগুলির মধ্যে মোবাইল ওয়েবকিট-অপ্টিমাইজড ইমপ্লিমেশন (ইনডেক্স। এইচটিটিএমএল) ব্যবহার করে জিকুয়্যারি (জেকুয়েরি-ইঞ্জিন এইচটিএমএল) এবং জিকুয়েরি মোবাইল (jquery-mobile.html) সহ ফটোসুইপ ব্যবহার করা অবধি রয়েছে।

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে ফটোসুইপটি তার ভিজ্যুয়াল উপস্থিতির দিক থেকে এবং এটি কীভাবে আপনার মোবাইল ওয়েবসাইটের মধ্যে এমবেড করা হয়েছে তার পক্ষে সম্পূর্ণরূপে কনফিগারযোগ্য। আপনি কীভাবে আপনার এইচটিএমএল, সিএসএস বা জাভাস্ক্রিপ্টকে সংগঠিত করেন তা প্রয়োগ করে না। এটা মনে রাখাও গুরুত্বপূর্ণ যে ফটোসুইপ দুটি স্বতন্ত্র স্বাদে আসে:

• একটি অ- jQuery, মোবাইল ওয়েবকিট অনুকূলিত সংস্করণ:এই সংস্করণটি স্ব-অন্তর্ভুক্ত এবং jQuery প্রয়োজন হয় না। এটি ওয়েবকিট (যেমন আইওএস, অ্যান্ড্রয়েড এবং ব্ল্যাকবেরি 6 ডিভাইস) এর উপর ভিত্তি করে মোবাইল ওয়েব ব্রাউজারগুলির জন্য যেমন হতে পারে ততটাই অনুকূলিত হতে লেখা হয়েছে। এটি ডেস্কটপ ওয়েবকিট ব্রাউজারগুলিতে যেমন ক্রোম এবং সাফারি পাশাপাশি ফায়ারফক্স 4 এবং তারপরের উপরও চলবে, যা উন্নয়নের উদ্দেশ্যে কার্যকর। এই সংস্করণটি ইন্টারনেট এক্সপ্লোরারে চলবে না।
• একটি jQuery সংস্করণ:আপনার যদি আরও বৃহত্তর ব্রাউজার সমর্থন প্রয়োজন হয় তবে এই বাস্তবায়নটি ব্যবহার করুন - উদাহরণস্বরূপ ইন্টারনেট এক্সপ্লোরার - অথবা আপনাকে ফটোসুইপকে একটি jQuery মোবাইল সাইটে একীভূত করতে হবে।

যে কোনও সংস্করণ দিয়ে শুরু করতে:

• একটি "গ্যালারী স্টাইল" এইচটিএমএল পৃষ্ঠা তৈরি করুন যাতে ফটোসুইপ সিএসএস ফাইল অন্তর্ভুক্ত থাকে এবং এতে থাম্বনেল চিত্রগুলির একটি তালিকা রয়েছে
• প্রতিটি থাম্বনেইল চিত্রটি পূর্ণ আকারের চিত্রের URL এর সাথে লিঙ্ক করা উচিত
• প্রতিটি থাম্বনেইল চিত্রের একটি বিকল্প "ওয়েল ট্যাগ" মান থাকতে পারে যা ফটোসুইপ চিত্রের ক্যাপশন হিসাবে ব্যবহার করবে

! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> মেটা সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1.0, সর্বোচ্চ-স্কেল = 1.0, ব্যবহারকারীর স্কেলেবল = 0;" নাম = "ভিউপোর্ট" /> লিঙ্ক href = "Photoswipe.css" টাইপ = "পাঠ্য / সিএসএস" rel = "স্টাইলশিট" />! - ফটোসুইপ স্ক্রিপ্টটি এখানে যাবে - </ head> বডি> ডিভি আইডি = "গ্যালারী "> ডিভো> ডিভ> একটি href =" চিত্র / পূর্ণ / 001.webp "> img src =" চিত্র / থাম্ব / 001.webp "Alt =" চিত্র 001 "/> / আ </ div> বিভাগ> একটি href = "চিত্রগুলি / পূর্ণ / 002.webp"> img src = "চিত্র / থাম্ব / 002.webp" Alt = "চিত্র 002" /> / এ </ div> বিভাগ> একটি href = "চিত্র / পূর্ণ / 003.webp" > img src = "চিত্র / থাম্ব / 003.webp" Alt = "চিত্র 003" /> / এ </ div> </ div> বিভাগ> একটি href = "চিত্র / পূর্ণ / 004.webp"> img src = "চিত্র / থাম্ব / 004.webp" Alt = "চিত্র 004" /> / এ / </ div> বিভাগ> একটি href = "চিত্র / পূর্ণ / 005.webp"> img src = "চিত্র / থাম্ব / 005.webp" Alt = "চিত্র 005" /> / এ </ div> বিভাগ> একটি href = "চিত্র / পূর্ণ / 006.webp"> img src = "চিত্র / থাম্ব / 006.webp" Alt = "চিত্র 006" /> / এ </ div> </ div> </ div> </ html>

এই আবশ্যক নয় যে এই থাম্বনেইল চিত্রগুলি ডিভগুলিতে সাজানো আছে: সেগুলি আপনার অনন্য অর্ডারেড তালিকাগুলি বা অন্য কোনও ফর্ম্যাটিং পছন্দগুলিতে সমানভাবে সাজানো যেতে পারে।

"মোবাইল ওয়েবকিট অনুকূলিতকরণ" সংস্করণ ব্যবহার করে ফটোসুইপ সেট আপ করতে:

• "সরল-উত্তরাধিকার.মিন.জেএস" এবং ফটোসুইপের সর্বশেষতম সংক্ষিপ্ত সংস্করণ অন্তর্ভুক্ত করুন, যেমন "কোড-ফটোওয়াইপ -১.০১6.min.js"
• "ডোম সামগ্রী লোড হওয়া" ইভেন্টে ফটোসুইপকে বলুন যেখানে আপনার থাম্বনেইলগুলি খুঁজে পাবেন, যেমন

স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "সরল-উত্তরাধিকার.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "কোড-ফটোওয়াইপ-1.0.06.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> ডকুমেন্ট.এডএভেন্টলিস্টনার ('ডোমকন্টেন্টলয়েড', ফাংশন () {কোড.ফোটোস্বাইপ ('এ', '# গ্যালারি');}, মিথ্যা) / স্ক্রিপ্ট>

JQuery সংস্করণ ব্যবহার করে ফটোসুইপ সেট আপ করতে:

• JQuery এর সর্বশেষতম সংস্করণ অন্তর্ভুক্ত করুন
• "সরল-উত্তরাধিকার.মিন.জেএস" এবং জিকুয়েরির জন্য ফটোসুইপের সর্বশেষতম সংস্করণ অন্তর্ভুক্ত করুন, যেমন "কোড-ফটোওয়াইপ-জিকুয়েরি -১.০১.1.min.js"
• Benচ্ছিকভাবে বেন বার্নেটের জিকুয়ারি অ্যানিমেটেড বর্ধিত প্লাগ-ইন অন্তর্ভুক্ত করুন। আপনার ব্রাউজারটি সিএসএস রূপান্তরকে সমর্থন করলে এটি মসৃণ অ্যানিমেশন সরবরাহ করবে
• "দস্তাবেজ প্রস্তুত" এ, ফটোসুইপ jQuery প্লাগ-ইন কল করুন; উদাহরণ স্বরূপ:

স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "jquery-1.6.1.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "jquery.animate-উন্নত.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "সরল-উত্তরাধিকার.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "কোড-ফটোওয়াইপ-jQuery-1.0.16.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> $ (দস্তাবেজ)। প্রস্তুত (ফাংশন () {$ ("# গ্যালারী এ") photo ফটোসুইপ ();;); / স্ক্রিপ্ট>

ফটোসুইপ কনফিগার করা হচ্ছে

ফটোসুইপ সিএসএস ফাইলের চাক্ষুষ উপস্থিতিটি চিহ্নিত করতে সংশোধন করার পাশাপাশি, স্ক্রিপ্টটি সম্পূর্ণরূপে কনফিগারেশন সেটিংসের সেট নিয়ে আসে যা আপনাকে আপনার বাস্তবায়ন কভারিংকে সূক্ষ্ম সুর করতে দেয়:

• যে কোনও অ্যানিমেশনের গতি সেট করা হচ্ছে
• সোয়াইপ এবং ডাবল ট্যাপ অঙ্গভঙ্গিগুলি কতটা সংবেদনশীল
• কীভাবে ফটোসুইপ আপনার চিত্রকে ভিউপোর্টের সাথে মানিয়ে যায়
• আপনার যদি আলাদা মার্কআপ বিন্যাস থাকে তবে ফটোসুইপ কীভাবে আপনার পূর্ণ আকারের চিত্রগুলি সনাক্ত করে
• কোনও ব্যবহারকারী কোনও চিত্র জুম বা ঘোরান Whether

এই সেটিংস এবং ডিফল্ট মানগুলি বিশদ সম্পর্কিত একটি সম্পূর্ণ তালিকা প্রকাশের প্যাকেজে "README.md" ফাইলটিতে উপলব্ধ। এগুলি github.com/codecomputerlove/PhotoSwipe এ অনলাইনেও দেখা যায়।

মোবাইল ওয়েবকিট অনুকূলিত সংস্করণে সরবরাহের সেটিংসের উদাহরণ:

স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> ডকুমেন্ট.এডএভেন্টলিস্টনার ('ডোমকন্টেন্টলয়েড', ফাংশন () {কোড.ফোটোসুইপ ('এ', '# গ্যালারী', {অনুমতিরেটসঅনউজারজুম: মিথ্যা, ম্যাক্সউজারজুম: .0.০, মিনিজারজার জুম: ০.২;)}; , মিথ্যা); / স্ক্রিপ্ট>

JQuery সংস্করণে সরবরাহের সেটিংসের উদাহরণ:

স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> $ (দস্তাবেজ)। প্রস্তুত (ফাংশন () {$ ("# গ্যালারী এ") photo স্ক্রিপ্ট>

কিছু কার্যকর মোবাইল জাভাস্ক্রিপ্ট ইভেন্ট

ফটোসুইপ মোবাইল ব্রাউজার থেকে বিকাশকারীদের জন্য উপলব্ধ যে কয়েকটি জাভাস্ক্রিপ্ট ইভেন্টের উপর নির্ভর করে:

স্পর্শ ইভেন্টগুলি - "টাচস্টার্ট, টাচমোভ, টাচেনড, টাচক্যান্সেল"

ব্যবহারকারী যখন স্ক্রিনটি স্পর্শ করেন তখন এই ইভেন্টগুলি ট্রিগার করা হয়। আপনার ইভেন্ট হ্যান্ডলার ফাংশনটি কোনও স্পর্শ ইভেন্টের থেকে যেমন পর্দার স্পর্শকারী আঙ্গুলের সংখ্যা (ইভেন্ট.টিউচস) এবং প্রতিটি স্পর্শের জন্য, সম্পর্কিত এক্স এবং ওয়াই সমন্বয় (ইভেন্ট.টচগুলি [0] .পেজএক্সএক্স), যেমন তথ্য অর্জন করতে পারে

document.addEventListener (‘টাচস্টার্ট’, ফাংশন (ইভেন্ট) {// এটি স্ক্রিনটি স্পর্শ করে এমন আঙ্গুলের সংখ্যা লগ করবে কনসোল.লগ (ইভেন্ট.touches.length);}, মিথ্যা));

বা, আপনি যদি jQuery ব্যবহার করছেন:

document (দস্তাবেজ) .বাইন্ড ('টাচস্টার্ট', ফাংশন (ইভেন্ট) {// এটি স্ক্রিনটি স্পর্শ করে এমন আঙ্গুলের সংখ্যা লগ করবে কনসোল.লগ (ইভেন্ট.রিজিনালইভেন্ট। টুচেসেলথ);});

এটি মনে রাখা গুরুত্বপূর্ণ যে এই ইভেন্টগুলিতে অ্যাক্সেস পাওয়ার জন্য jQuery ব্যবহার করার সময় আপনাকে অবশ্যই ইভেন্ট অবজেক্টের "অরিজিনাল এভেন্ট" সম্পত্তিটি উল্লেখ করতে হবে। এটি jQuery এর নিজস্ব ইভেন্ট অবজেক্টে ইভেন্টগুলি গুটিয়ে রাখার কারণে এটি।

অঙ্গভঙ্গি ইভেন্ট - "অঙ্গভঙ্গি স্টার্ট, অঙ্গভঙ্গি, অঙ্গভঙ্গি" (কেবলমাত্র আইওএস)

এই ইভেন্টগুলি একাধিক-স্পর্শের ক্রম চলাকালীন শুরু হয়, সাধারণত অঙ্গভঙ্গিগুলিকে পিনিং এবং ঘোরানো। অঙ্গভঙ্গির ইভেন্ট অবজেক্টগুলি স্কেল এবং আবর্তনের মতো দরকারী তথ্যে পাস করে। ফটো স্কুইপ এগুলি ব্যবহার করে যখন চিত্রের স্কেলিং পরিচালনা করে এবং আইওএস ডিভাইসে ঘোরানো হয়।

স্ক্রিন ওরিয়েন্টেশন - "ওরিয়েন্টেশন পরিবর্তন"

এই ইভেন্টটি প্রতি 90 ডিগ্রি রোটেশন (প্রতিকৃতি এবং ল্যান্ডস্কেপ মোড) দ্বারা ট্রিগার করা হয়। আপনি উইন্ডো.অরিয়েন্টেশনের মাধ্যমে বর্তমান ওরিয়েন্টেশনটি পেতে পারেন।

• 0 = "প্রতিকৃতি"
• -90 = "ল্যান্ডস্কেপ (ডানদিকে, পর্দার ঘড়ির কাঁটার দিকে ঘুরিয়ে দেওয়া হয়েছে)"
• 90 = "ল্যান্ডস্কেপ (বাম, স্ক্রিনটি ঘড়ির কাঁটার বিপরীতে পরিণত হয়েছে)"
• 180 = "প্রতিকৃতি (উল্টে ডাউন প্রতিকৃতি)"

ডিভাইস মোশন ইভেন্টস - "ডিভাইস মোশন" (কেবলমাত্র আইওএস)

অফিশিয়াল সাফারি রেফারেন্স ডকুমেন্টেশন থেকে, "গতিতে উল্লেখযোগ্য পরিবর্তন ঘটে এলে এগুলি তৈরি করা হয়। ডিভাইসমোশনের ইভেন্ট ইভেন্টটি ব্যবধান, ঘূর্ণন হার এবং একটি ডিভাইসের ত্বরণ পরিমাপকে আবদ্ধ করে"।
এই ইভেন্টটি ব্যবহারকারী কখন ডিভাইসকে কাঁপায় বা সরায় তা সনাক্ত করার জন্য দরকারী।

এই ইভেন্টগুলি সম্পর্কে আরও তথ্য সাফারি বিকাশকারী সাইটে পাওয়া যাবে:

• বিকাশকারী / অ্যাপ্লিকেশন / লিবারি / সাফারি /# ডকুমেন্টেশন / অ্যাপ্ল্যাপ্লিকেশনস / রেফারেন্স / সাফারিওবকন্টেন্ট / হ্যান্ডলিংজেটস / হ্যান্ডলিংজেন্টস.html

এবং

• বিকাশকারী.অ্যাপল.com/লিবারি / সাফারি /# ডকুমেন্টেশন / সাফারিডোম্যাডিশনস / রেফারেন্স / ডিভাইস মোশনএভেন্টক্লাস রেফ / ডিভাইস মোশনইভেন্ট / ডিভাইস মোশনইভেন্ট HTML

মোড়ক উম্মচন

আশা করি, এই টিউটোরিয়ালটি আপনাকে ফটোসাইপ ব্যবহার করে আপনার মোবাইল ওয়েবসাইটগুলিতে কীভাবে একটি "নেটিভ লাইক", অঙ্গভঙ্গি ভিত্তিক চিত্র দর্শক যুক্ত করবেন তার একটি দ্রুত অন্তর্দৃষ্টি দিয়েছে।

আমি আরও আশা করি যে মোবাইল ব্রাউজারগুলির মাধ্যমে উপলব্ধ ইভেন্টগুলির দ্রুত চালিয়ে যাওয়া আপনার মোবাইল ওয়েবসাইটগুলিকে উন্নত করতে প্রযুক্তি ব্যবহারের নতুন এবং উদ্ভাবনী উপায় নিয়ে আসার সাথে সাথে আপনার কল্পনাশক্তিটিকে আগুনে ফেলে দেবে।