আজ, প্রতিক্রিয়াশীল ডিজাইন ডিজাইনার এবং ডেভেলপারদের জন্য এক নম্বর পছন্দ হয়ে উঠেছে, কারণ আরও বেশি সংখ্যক লোক তাদের ওয়েবসাইটগুলি স্মার্ট ডিভাইসে চালাতে চায়৷ প্রতিক্রিয়াশীল ডিজাইন মোবাইল ব্যবহারকারীর দৃষ্টি আকর্ষণ করে এবং আপনাকে লিড এবং বিক্রয় তৈরি করতে সাহায্য করে যা আপনার ব্যবসাকে অন্য স্তরে নিয়ে যায়।
আজকাল, আপনি মেনু, গ্রিড, কলাম এবং এমনকি ছবি এবং চিত্রের মতো প্রায় সবকিছুর জন্য প্রতিক্রিয়াশীল লেআউট তৈরি করতে পারেন। আপনি যদি আপনার ওয়েবসাইটের বিষয়বস্তু, ছবি এবং ভিডিও একটি প্রতিক্রিয়াশীল গ্যালারী শৈলীতে প্রদর্শন করতে চান তাহলে নিম্নলিখিত jQuery চিত্র গ্যালারি প্লাগইনগুলি আপনাকে এতে সাহায্য করতে পারে।
এই নিবন্ধটিতে কিছু সেরা প্রতিক্রিয়াশীল jQuery ইমেজ গ্যালারি প্লাগইন রয়েছে যা আপনাকে শুধুমাত্র আপনার ওয়েবসাইটগুলির জন্য প্রতিক্রিয়াশীল চিত্র গ্যালারী তৈরি করতে সক্ষম করবে না কিন্তু আপনার ওয়েবসাইটকে আরও সুন্দর এবং দৃশ্যত অত্যাশ্চর্য করতে মার্জিত শৈলীতে প্রদর্শন করবে৷
নীচে 2016 সালে বিবেচনা করার মতো সেরা প্রতিক্রিয়াশীল jQuery ইমেজ গ্যালারি প্লাগইনগুলির তালিকা রয়েছে৷
বুটস্ট্র্যাপ ফটো গ্যালারি হল একটি সাধারণ jQuery প্লাগইন যা আপনার ছবির জন্য একটি বুটস্ট্র্যাপ ভিত্তিক প্রতিক্রিয়াশীল ফটো গ্যালারি তৈরি করবে।
এই প্লাগইন ছবি এবং ক্যাপশনের জন্য পরিবর্তনশীল উচ্চতা সমর্থন করে। "পরবর্তী" এবং "আগের" পেজিং সহ একটি ঐচ্ছিক "মডেল" বক্সও অন্তর্ভুক্ত করা হয়েছে৷
ডেমো এবং ডাউনলোড করুন
এটি আপনার সাইটে ছবি এবং YouTube ভিডিও প্রদর্শনের জন্য একটি আধুনিক, লাইটবক্স শৈলীর গ্যালারি৷ গ্যালারি ইন্টারফেস সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং ছোট বা বড় সমস্ত ডিভাইস জুড়ে সুন্দরভাবে কাজ করে।
ডেমো এবং ডাউনলোড করুন
FABA হল প্রতিক্রিয়াশীল ফেসবুক অ্যালবাম এবং ফটো গ্যালারি jquery প্লাগইন যা নির্বাচিত Facebook পৃষ্ঠা থেকে সমস্ত অ্যালবাম এবং ফটো লোড করবে।
এখানে প্রায় 90টি বিকল্প রয়েছে যা আপনি সম্পাদনা করতে পারেন এবং আপনি প্রায় সবকিছুই কাস্টমাইজ করতে পারেন: অ্যানিমেশন, হোভার প্রভাব, হোভার অ্যানিমেশনের প্রতিটি অংশ, পাঠ্য, আচরণ এবং আরও অনেক কিছু। আপনি আপনার প্রকল্প, বা ওয়েব পৃষ্ঠায় সুন্দর অ্যালবাম একত্রিত করতে পারেন।
xGallerify হল একটি হালকা ওজনের, প্রতিক্রিয়াশীল গ্যালারি প্লাগইন যা আপনাকে আপনার ওয়েবসাইটের জন্য সুন্দর ইমেজ গ্যালারী তৈরি করতে দেয়। এই প্লাগইনটি লাইটওয়েট (ফাইলের আকারের 3kb), ব্যবহার করা সহজ এবং কাস্টমাইজযোগ্য বিকল্প এবং শৈলীর সংখ্যা সহ আসে।
ডেমো এবং ডাউনলোড করুন
ইনস্টাগ্রাম এলিমেন্ট হল ব্লগার, ফটোগ্রাফার, মডেল এবং যে কেউ ইনস্টাগ্রামে তাদের উপস্থিতি বাড়াতে চায় তাদের জন্য একটি প্রিমিয়াম ইনস্টাগ্রাম প্লাগইন।
এই প্লাগইনটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং আপনাকে সহজেই 50+ বিকল্পগুলি পরিচালনা করতে দেয় এবং আপনাকে যেকোনো ডিভাইসে সুন্দরভাবে আপনার ফটোগুলি প্রদর্শন করতে দেয়৷
SnapGallery হল একটি সাধারণ jQuery প্লাগইন যা জাভাস্ক্রিপ্টের একটি লাইন সহ একটি সুন্দর, কাস্টমাইজযোগ্য গ্যালারিতে ভিন্ন আকারের চিত্রগুলির একটি কুৎসিত তালিকাকে পরিণত করে৷
এটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল, কাস্টমাইজযোগ্য এবং আপনাকে ছবিগুলির মধ্যে ব্যবধান, স্ট্যাক করার আগে অনুমোদিত ন্যূনতম প্রস্থ এবং সর্বাধিক সংখ্যক কলাম নির্বাচন করার অনুমতি দেয়, পথে আরও বিকল্প রয়েছে!
ডেমো এবং ডাউনলোড করুন
ঈগল গ্যালারি এটি ইমেজ জুম কার্যকারিতা সহ আধুনিক গ্যালারি। গ্যালারি পরিচালনা করতে আপনি অঙ্গভঙ্গি বা নিয়ন্ত্রণ বোতাম ব্যবহার করতে পারেন। এটি একটি সম্পূর্ণ প্রতিক্রিয়াশীল গ্যালারি যার সমর্থন টাচ স্ক্রিন রয়েছে এবং এটি মোবাইল ডিভাইস, ল্যাপটপ এবং ডেস্কটপের জন্য তৈরি করা হয়েছে।
এই গ্যালারির সাহায্যে আপনি সহজেই আপনার ইন্টারনেট শপে বিস্তারিত দেখার জন্য একটি পণ্য গ্যালারি তৈরি করতে পারেন এবং বিকল্পগুলির সাহায্যে এটি কাস্টমাইজ করতে পারেন।
ইউনাইট গ্যালারি jQuery লাইব্রেরির উপর ভিত্তি করে বহুমুখী জাভাস্ক্রিপ্ট গ্যালারি। এটি একটি মডুলার টেকনিক দিয়ে তৈরি করা হয়েছে যাতে ব্যবহার এবং কাস্টমাইজেশনের অনেক জোর দেওয়া হয়। গ্যালারি কাস্টমাইজ করা, CSS এর মাধ্যমে এর স্কিন পরিবর্তন করা এবং এমনকি আপনার নিজের থিম লেখা খুবই সহজ। তবুও এই গ্যালারিটি খুব শক্তিশালী, দ্রুত এবং আজকাল এর বেশিরভাগ বৈশিষ্ট্য অবশ্যই থাকতে হবে যেমন প্রতিক্রিয়াশীলতা, স্পর্শ সক্ষম এবং এমনকি জুম বৈশিষ্ট্য, এটি অনন্য প্রভাব।
ডেমো এবং ডাউনলোড করুন
jQuery lightGallery হল একটি হালকা ওজনের jQuery লাইটবক্স গ্যালারি যা ইমেজ এবং ভিডিও গ্যালারি প্রদর্শনের জন্য।
লাইটগ্যালারি টাচস্ক্রিন ডিভাইসে টাচ এবং সোয়াইপ নেভিগেশন সমর্থন করে, সেইসাথে ডেস্কটপের জন্য মাউস ড্র্যাগ। এটি ব্যবহারকারীদের সোয়াইপ বা মাউস টেনে স্লাইডগুলির মধ্যে নেভিগেট করতে দেয়৷
লাইটগ্যালারি অনেকগুলি বিকল্পের সাথে আসে, যা আপনাকে প্লাগইনটি খুব সহজে কাস্টমাইজ করতে দেয়। SASS ভেরিয়েবল আপডেট করে আপনি সহজেই গ্যালারির চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন।
ডেমো এবং ডাউনলোড করুন
এটি আরেকটি দুর্দান্ত jQuery ইমেজ গ্যালারি প্লাগইন যা আপনাকে আপনার ছবি এবং ভিডিওর জন্য গ্রিড লেআউট গ্যালারি তৈরি করতে দেয়। এই প্লাগইনগুলি সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং সামাজিক ভাগ করে নেওয়া, অসীম স্ক্রোলিং, css3 অ্যানিমেশন, ফিল্টার এবং আরও অনেক কিছুর মতো বৈশিষ্ট্যগুলির সাথে একত্রিত৷
blueimp গ্যালারি হল একটি স্পর্শ-সক্ষম, প্রতিক্রিয়াশীল এবং কাস্টমাইজযোগ্য ইমেজ এবং ভিডিও গ্যালারি, ক্যারোজেল এবং লাইটবক্স, মোবাইল এবং ডেস্কটপ ওয়েব ব্রাউজার উভয়ের জন্যই অপ্টিমাইজ করা হয়েছে।
এটিতে সোয়াইপ, মাউস এবং কীবোর্ড নেভিগেশন, ট্রানজিশন ইফেক্ট, স্লাইডশো কার্যকারিতা, পূর্ণস্ক্রীন সমর্থন এবং অন-ডিমান্ড সামগ্রী লোডিং বৈশিষ্ট্য রয়েছে এবং অতিরিক্ত সামগ্রীর ধরন প্রদর্শনের জন্য প্রসারিত করা যেতে পারে।
ডেমো এবং ডাউনলোড করুন
nanoGALLERY হল একটি স্পর্শ সক্ষম এবং প্রতিক্রিয়াশীল ইমেজ গ্যালারি যা ন্যায্য, ক্যাসকেডিং এবং গ্রিড লেআউট সহ। এটি স্ব-হোস্ট করা ছবি এবং ফ্লিকার, পিকাসা, Google+ এবং SmugMug ফটো অ্যালবামগুলিকে সমর্থন করে৷
অ্যালবামে মাল্টি-লেভেল নেভিগেশন, থাম্বনেইলে কম্বিনেবল হোভার ইফেক্ট, প্রতিক্রিয়াশীল থাম্বনেইল সাইজ, একাধিক লেআউট, স্লাইডশো, ফুলস্ক্রিন, পেজিনেশন, ইমেজ অলস লোডিং এবং আরও অনেক কিছুর বৈশিষ্ট্য রয়েছে।
ডেমো এবং ডাউনলোড করুন
flipGallery হল একটি বিনামূল্যের jQuery চালিত ফটো গ্যালারি যেখানে থাম্বনেইল এবং লাইটবক্স বড় করার মধ্যে মসৃণ ফ্লিপিং ট্রানজিশন রয়েছে৷ অন্যান্য বৈশিষ্ট্যগুলির মধ্যে রয়েছে ডায়নামিক ইমেজ স্ট্রিমিং, অটো পেজিনেশন, অটো ক্রপিং এবং ট্রান্সপারেন্ট ইমেজ ওভারলে।
এই প্লাগইনটির একটি প্রিমিয়াম সংস্করণও রয়েছে যা কয়েকটি নিফটি বৈশিষ্ট্য সহ আসে এবং অবশ্যই প্রতিক্রিয়াশীলতা অন্তর্ভুক্ত করে।
ডেমো এবং ডাউনলোড করুন
অভিনব গ্যালারি হল প্রতিক্রিয়াশীল jQuery ইমেজ গ্যালারি প্লাগইন যা আপনাকে অভিনব শৈলীতে আপনার ছবি এবং ভিডিও প্রদর্শন করতে দেয়। এই প্লাগইনগুলিতে প্রচুর কাস্টমাইজেশন বিকল্প রয়েছে এবং আপনি সীমাহীন অ্যালবাম, ভিডিও, ছবি এবং আরও অনেক কিছু যোগ করতে পারেন৷
প্লাগইনটি থাম্বনেইল এবং শিরোনামের জন্য বিভিন্ন হোভার প্রভাব সহ আসে, যা সামঞ্জস্য করা যেতে পারে। আপনি 7টি পূর্বনির্ধারিত রঙের থিমগুলির মধ্যে চয়ন করতে পারেন বা সহজেই আপনার নিজস্ব রঙের থিম তৈরি করতে পারেন।
ব্যালেন্সড গ্যালারি হল একটি jQuery প্লাগইন যা সারি বা কলাম জুড়ে সমানভাবে ফটো বিতরণ করে, প্রদত্ত স্থানের সর্বাধিক ব্যবহার করে৷ ডিফল্টভাবে 'কন্টেইনার' উপাদানের আকারের উপর ভিত্তি করে ফটোগুলি স্কেল করা হয়, যার ফলে ব্যালেন্সড গ্যালারি প্রতিক্রিয়াশীল ওয়েবসাইটের জন্য একটি ভাল পছন্দ করে।
ডেমো এবং ডাউনলোড করুন
S Gallery HTML5 এর ফুল স্ক্রীন API ব্যবহার করে এবং CSS3 অ্যানিমেশনের ভালোতা এবং CSS3 রূপান্তরের উপর অনেক বেশি নির্ভর করে, তাই এটি শুধুমাত্র সেই ব্রাউজারগুলিতে কাজ করবে যা এই বৈশিষ্ট্যগুলিকে সমর্থন করে৷
ডেমো এবং ডাউনলোড করুন
এটি একটি HTML | CSS | একটি লাইটবক্স সহ JQuery গ্রিড, আপনি গ্রিডের জন্য থাম্বনেইলগুলি নির্দিষ্ট করতে পারেন এবং যখন আপনি লাইটবক্স খুলতে এটিতে ক্লিক করেন তখন এটি সাধারণ চিত্র লোড করবে, আপনি ক্যাপশন এবং লাইটবক্সের জন্য পাঠ্য নির্দিষ্ট করতে পারেন। এছাড়াও আপনাকে একবারে সমস্ত ছবি লোড করতে হবে না (পারফরম্যান্সের উদ্দেশ্যে) যাতে আপনি প্রথমবার লোড হওয়ার সময় কতগুলি ছবি লোড করতে হবে এবং যখন আপনি "আরো ছবি লোড করুন" বোতামে ক্লিক করেন তখন লোড করা ছবির সংখ্যা নির্দিষ্ট করতে পারেন।
প্রতিক্রিয়াশীল থাম্বনেইল গ্যালারি হল একটি jQuery প্লাগইন যা ইমেজ গ্যালারী তৈরি করার জন্য যা তাদের কন্টেইনারের সাথে মানানসই।
ডেমো এবং ডাউনলোড করুন
সুপারবক্স হল একটি jQuery প্লাগইন যা সম্পূর্ণ 'ইমেজ' এবং 'লাইটবক্স'-কে আরও এক ধাপ এগিয়ে নিয়ে যায়, লাইটবক্সিংকে অতীতের জিনিস করতে জাভাস্ক্রিপ্ট এবং ইমেজ লোড নির্ভরতা হ্রাস করে! HTML5 ডেটা-* বৈশিষ্ট্য, প্রতিক্রিয়াশীল লেআউট এবং jQuery ব্যবহার করা।
সুপারবক্স একটি স্ট্যাটিক ইমেজ গ্যালারি হিসাবে বিস্ময়কর কাজ করে, যেটিতে ক্লিক করে আপনি ছবিটির সম্পূর্ণ সংস্করণ প্রকাশ করতে পারেন।
ডেমো এবং ডাউনলোড করুন
আল্টিমেট থাম্বনেইল গ্যালারি সম্পূর্ণরূপে প্রতিক্রিয়াশীল ইমেজ গ্যালারি প্লাগইন দুটি লেআউট প্রকারে (গ্রিড এবং লাইন, উল্লম্ব এবং অনুভূমিক), স্ক্রোল (jScrollPane) বা বোতাম নেভিগেশন সহ আসে। থাম্বনেইল বাক্সগুলি তাদের ভিতরে যে কোনও HTML উপাদান সমর্থন করে।
দক্ষতার সাথে রচিত এবং দৃশ্যমানভাবে ডিজাইন করা, আমাদের ক্ষেত্রে, এটি একটি পৃথক পৃষ্ঠা, এটি যে কোনও বিশেষজ্ঞের ব্যক্তিগত ওয়েবসাইট বা ব্লগের একটি গুরুত্বপূর্ণ উপাদান যিনি তার পেশাদার কার্যকলাপে একটি নির্দিষ্ট স্তরের দক্ষতা অর্জন করেছেন।
একটি পোর্টফোলিও পৃষ্ঠা হল এক ধরণের প্রতিবেদন, বা একটি ভিজ্যুয়াল সারাংশ, যার সাহায্যে আপনি আপনার ওয়েবসাইট/ব্লগের পাঠক এবং দর্শকদের কাছে সবচেয়ে সফল সমাপ্ত কাজের একটি সেট স্পষ্টভাবে প্রদর্শন করতে পারেন, তা ফটোগ্রাফ, নিবন্ধ, প্রকাশনা, নকশাই হোক না কেন। উপাদান, ইত্যাদি
আমার কাছে এমন একটি পৃষ্ঠা নেই এবং, আমার পক্ষ থেকে, এটি একটি বিরক্তিকর বাদ যা যত তাড়াতাড়ি সম্ভব সংশোধন করা দরকার, যা আসলে এই মুহূর্তেএবং আমি কাজ করি।
অন্তহীন জায়গায় বিশ্বব্যাপী নেটওয়ার্ক, আপনি আপনার পোর্টফোলিও সংগঠিত করার জন্য বিপুল সংখ্যক রেডিমেড পৃষ্ঠা টেমপ্লেট খুঁজে পেতে পারেন এবং এই জাতীয় পৃষ্ঠাগুলির বৈচিত্র্য সত্যিই চিত্তাকর্ষক। সুতরাং, যারা ওয়েব ডিজাইন এবং ডেভেলপমেন্টের সমস্ত জটিলতাগুলিকে অধ্যয়ন করতে চান না তারা সর্বদা নিজেদের জন্য একটি উপযুক্ত বিকল্প খুঁজে পেতে সক্ষম হবেন। ঠিক আছে, ওয়েবসাইট তৈরির বিষয়ে যাদের জ্ঞান নেই, তাদের জন্য আমি অভিযোজিত বিন্যাসের একটি উদাহরণ দেখার প্রস্তাব দিচ্ছি, একটি সাধারণ পোর্টফোলিও পৃষ্ঠা, যেখানে ক্যাটাগরি অনুসারে সম্পূর্ণ কাজগুলি ফিল্টার করা হয়েছে, যা তৈরি করা হয়েছে, একটি আকর্ষণীয় ট্রানজিশন ইফেক্ট দিয়ে মিশ্রিত করা হয়েছে, অ্যানিমেশন উপাদানগুলির সাথে।
পেজ লেআউট, এক্সিকিউটেবল জাভাস্ক্রিপ্ট এবং কিছু ডিজাইন এলিমেন্ট তৈরি করেছেন চমৎকার ওয়েব ডিজাইনার এবং ডেভেলপার কেভিন লিউ (queness.com)। নির্বাচন করার সময় সর্বোত্তম সমাধান, আমার জন্য যা গুরুত্বপূর্ণ ছিল তা হল কার্যকর করার সহজতা, jQuery প্লাগইনের কার্যকারিতা, সঠিক কাজসমস্ত আধুনিক ব্রাউজারে, এবং বিভিন্ন ব্যবহারের ক্রমবর্ধমান জনপ্রিয়তা দেওয়া হয়েছে মোবাইল ডিভাইস, ইন্টারনেট সার্ফিংয়ের জন্য, ভবিষ্যতের পৃষ্ঠার ডিজাইনের অভিযোজনযোগ্যতা। কোন অভিনব, ডিজাইনার ঘন্টা এবং whistles বা ভারী প্লাগইন.
মৌলিক লেআউট দুটি প্রধান উপাদান নিয়ে গঠিত ইউজার ইন্টারফেস, যা আমাদের তৈরি করতে হবে তা হল জমাকৃত কাজের বিভাগগুলি ফিল্টার করার জন্য ট্যাব নেভিগেশন এবং হোভারে একটি পপ-আপ ক্যাপশনের প্রভাবের সাথে থাম্বনেইলের গ্রিড।
শুরুতে, সবকিছু শেষ পর্যন্ত কাজ করার জন্য, আপনার প্রয়োজন হবে jQuery সংস্করণ 1.7.0 বা উচ্চতর। আপনার যদি এটি এখনও সংযুক্ত না থাকে তবে ট্যাগের আগে নিম্নলিখিত লাইনটি যুক্ত করুন:
MixItUp প্লাগইন চালু করুন, উপরের ফাইলগুলির পরে এই কোডটি সন্নিবেশ করুন:
| < script type= "text/javascript" >$(ফাংশন () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , প্রভাব: [ "fade" ] , easing : "স্ন্যাপ" , // মিক্সএন্ডে হোভার ইফেক্ট কল করুন: ফিল্টার ইফেক্ট() ) , হোভার ইফেক্ট: ফাংশন () ( $("#পোর্টফোলিওলিস্ট .পোর্টফোলিও") . হোভার (ফাংশন () ( $(এই)। ".লেবেল" ) এনিমেট(( নীচে: 0 ) ; ) . স্টপ() "easeOutQuad") ); |
$(ফাংশন () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", প্রভাব: ["fade"], easing : "স্ন্যাপ", // মিক্সএন্ডে হোভার প্রভাব কল করুন: filterList.hoverEffect() )), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find( ".label").stop().animate((bottom: 0), 200, "easeOutQuad" $(this).find("img").stop().animate((top: -30 ), 500, "easeOutQuad" ); ("img").stop().animate((top: 0), 300, "easeOutQuad" ) );
সমস্ত প্লাগইন বিকল্পগুলিকে আলাদাভাবে বিবেচনা করার কোন মানে নেই; ওয়েল, যদি কেউ পরামিতি নিয়ে পরীক্ষা করতে চায়, দয়া করে আপনার ক্ষমতার মধ্যে সবকিছু করুন।
পৃষ্ঠা বিন্যাস এবং উপাদানগুলির উপস্থিতি গঠন করতে, নথিতে কয়েকটি ফাইল সংযুক্ত করুন। , মৌলিক শৈলীগুলির জন্য একটি, আসুন এটিকে বলি উদাহরণস্বরূপ: layout.css এবং আরেকটি ছোট CSS ফাইল normalize.css, উপাদানগুলির আদর্শ ডিজাইনে আরও ভাল ব্রাউজার সামঞ্জস্য নিশ্চিত করতে:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
এখন আসুন সবকিছুকে ক্রমানুসারে দেখি, যদি সম্ভব হয় অপ্রয়োজনীয় জল ছাড়াই, অ্যাক্সেসযোগ্য এবং বোধগম্য উপায়ে, আমাদের স্থানীয়, দীর্ঘ-সহনশীল ভাষায়।
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >সব< li>< span class = "filter" data- filter= "app" >অ্যাপ্লিকেশন< li>< span class = "filter" data- filter= "card" >ব্যবসা কার্ড< li>< span class = "filter" data- filter= "icon" >আইকন< li>< span class = "filter" data- filter= "logo" >লোগো< li>< span class = "filter" data- filter= "web" >ওয়েব ডিজাইন |
- সব
- অ্যাপ্লিকেশন
- ব্যবসা কার্ড
- আইকন
- লোগো
- ওয়েব ডিজাইন
নেভিগেশন প্যানেলে, আমরা কাজগুলির সম্পূর্ণ তালিকাটি বিভাগগুলিতে বিভক্ত করি। ডেটা-ফিল্টার অ্যাট্রিবিউটের মান অনুসারে আমাদের প্রতিটি পোর্টফোলিও বিভাগকে ডেটা-ক্যাট অ্যাট্রিবিউটের মাধ্যমে এক বা অন্য নেভিগেশন বার আইটেমের সাথে সংযুক্ত করতে হবে। ডেটা-ফিল্টারের মানগুলি ডেটা-বিড়ালের সাথে মেলে, পোর্টফোলিও আইটেমগুলি বিভাগ অনুসারে ফিল্টার করা হবে।
উপরন্তু, আমরা থাম্বনেইলে যোগ করব, আপাতত লুকানো, কাজের নাম এবং বিভাগের শিরোনাম সহ একটি ছোট প্যানেল, যেটি শুধুমাত্র আপনি যখন ছবির উপর ঘোরাবেন তখনই পপ আপ হবে। এবং গঠন সহজ করতে চেহারা CSS-এ এই পুরো কাঠামোর জন্য, আসুন উপাদানগুলির সাথে সংশ্লিষ্ট ক্লাসগুলি বরাদ্দ করি:
| < div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >হোস্টিং শুরু করুন। রু< span class = "text-category" >লোগো< div class = "label-bg" > ......... |
হোস্টিং Beget.Ruলোগো.........
দয়া করে মনে রাখবেন যে আপনি ছবিতে বা সরাসরি স্বাক্ষরে লিঙ্ক যুক্ত করতে পারেন যাতে ব্যবহারকারী আপনার সমস্ত কাজ সম্পূর্ণরূপে দেখতে পারে।
এখন, নিঃশব্দে, আমাদের পোর্টফোলিও পৃষ্ঠার ইউজার ইন্টারফেসের সাধারণ শৈলী এবং এর অভিযোজিত সংস্করণের CSS-এ গঠনের সবচেয়ে আকর্ষণীয় বিষয়ের দিকে এগিয়ে যাওয়া যাক। নিবন্ধে আমি কেবলমাত্র মৌলিক (ডিফল্ট) মানগুলি নির্দেশ করব, অর্থাৎ, কোনও ব্যাকগ্রাউন্ড ইমেজ এবং সংযুক্ত ফন্ট ছাড়াই, যাদের এটি প্রয়োজন তাদের জন্য, ডেমোতে দেখা যেতে পারে বা উত্স কোড সহ সংরক্ষণাগারে পাওয়া যেতে পারে; .
| .container ( অবস্থান : আপেক্ষিক ; প্রস্থ : 960px ; মার্জিন : 0 স্বয়ংক্রিয় ; /* আপনি ব্রাউজার উইন্ডোর আকার পরিবর্তন করার সময় পরিবর্তনের চেইন দেখতে সক্ষম হবেন */ -ওয়েবকিট-ট্রানজিশন: সমস্ত 1s সহজ; -moz-ট্রানজিশন: সব 1s ease; -o -transition: all 1s ease; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li স্প্যান (প্রদর্শন: ব্লক; প্যাডিং: 5px 20px; পাঠ্য-সজ্জা: কোনোটি নয়; রঙ: #666; /* পাঠ্যের জন্য কিছু ছায়া যোগ করুন */ পাঠ্য-ছায়া: 1px 1px #FFFFFF; ফিল্টারগুলি স্প্যান: হোভার (পটভূমি: # 34B7CD ; টেক্সট-শ্যাডো : 0 0 2px #004B7D ; রঙ : #fff ; 0 0 2px #004B7D ; রঙ : #fff ; |
ধারক ( অবস্থান: আপেক্ষিক; প্রস্থ: 960px; মার্জিন: 0 স্বয়ংক্রিয়; /* আপনি ব্রাউজার উইন্ডোটির আকার পরিবর্তন করার সময় পরিবর্তনের চেইনটি দেখতে সক্ষম হবেন */ -ওয়েবকিট-ট্রানজিশন: সমস্ত 1s সহজ; -moz-ট্রানজিশন: সমস্ত 1s সহজ; -ও- ট্রানজিশন: সমস্ত 1s সহজ; (প্রদর্শন: ব্লক; প্যাডিং: 5px 20px; পাঠ্য-সজ্জা: কোনোটিই নয়; রঙ: #666; /* পাঠ্যের জন্য একটু ছায়া যোগ করুন */ পাঠ্য-ছায়া: 1px 1px #FFFFFF; কার্সার: পয়েন্টার; /* পটভূমি পরিবর্তন করুন হোভার */ #filters li span:hover (ব্যাকগ্রাউন্ড: #34B7CD; টেক্সট-শ্যাডো: 0 0 2px #004B7D; রঙ:#fff; ) /* সক্রিয় বিভাগের আইটেমের ব্যাকগ্রাউন্ড */ #ফিল্টার লি স্প্যান। সক্রিয় ( ব্যাকগ্রাউন্ড: rgb(62, 151, 221); টেক্সট-শ্যাডো: 0 0 2px #004B7D; রঙ:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box- সাইজিং: বর্ডার-বক্স- সাইজিং: 1% ফ্লোট: লুকানো;
অবস্থান: আপেক্ষিক! গুরুত্বপূর্ণ; পটভূমি: #666;কার্সার:পয়েন্টার; ) .পোর্টফোলিও img ( সর্বোচ্চ-প্রস্থ:100%; অবস্থান: আপেক্ষিক; ) /* স্বাক্ষরগুলি ডিফল্টরূপে লুকানো থাকে */ .পোর্টফোলিও .লেবেল ( অবস্থান: পরম; প্রস্থ: 100%; উচ্চতা: 40px; নীচে:-40px; ) । # fff; অবস্থান: আপেক্ষিক; 5px 8px;
| /* ট্যাবলেট */ @মিডিয়া শুধুমাত্র স্ক্রীন এবং (ন্যূনতম-প্রস্থ: 768px) এবং (সর্বোচ্চ-প্রস্থ: 959px) ( .কন্টেইনার (প্রস্থ: 768px; ) ) /* মোবাইল - দ্রষ্টব্য: 320px প্রস্থ */ @media শুধুমাত্র জন্য ডিজাইন স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 767px) (.container (প্রস্থ: 95%;) #portfoliolist .portfolio (প্রস্থ: 48%; মার্জিন: 1%;)) /* মোবাইল - নোট: 480px প্রস্থ */ @media এর জন্য ডিজাইন শুধুমাত্র স্ক্রিন এবং (মিনিমাম-প্রস্থ: 480px) এবং (সর্বোচ্চ-প্রস্থ: 767px) (.কন্টেইনার (প্রস্থ: 70%;)) |
/* ট্যাবলেট */ @media শুধুমাত্র স্ক্রীন এবং (মিনিমাম-প্রস্থ: 768px) এবং (সর্বোচ্চ-প্রস্থ: 959px) ( .কন্টেইনার (প্রস্থ: 768px; ) ) /* মোবাইল - নোট: 320px প্রস্থ*/ @media শুধুমাত্র জন্য ডিজাইন স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 767px) ( .কন্টেইনার (প্রস্থ: 95%; ) #পোর্টফোলিওলিস্ট .পোর্টফোলিও (প্রস্থ:48%; মার্জিন:1%; ) ) /* মোবাইল - নোট: 480px প্রস্থের জন্য ডিজাইন */ @media শুধুমাত্র স্ক্রীন এবং (মিনিমাম-প্রস্থ: 480px) এবং (সর্বোচ্চ-প্রস্থ: 767px) ( .কন্টেইনার (প্রস্থ: 70%; ) )
এতটুকুই। বিশাল শিরোনাম "পোর্টফোলিও" এর অধীনে আমাদের বিস্ময়কর পৃষ্ঠাটি প্রস্তুত, যা বাকি থাকে তা হল এটিকে আপনার সমান বিস্ময়কর এবং অসামান্য কাজ দিয়ে পূরণ করা এবং সমগ্র বিশ্বের দেখার জন্য এটি প্রদর্শন করা। আপনি এখনও শান্তভাবে, বিনয়ীভাবে, নিজেকে নিয়ে গর্বিত হতে পারেন। প্রধান জিনিস এই ক্ষেত্রে এটি অত্যধিক করা হয় না।
উদাহরণটি আবার দেখুন এবং প্রয়োজন হলে, আপনার অবসর সময়ে, একটি শান্ত বাড়ির পরিবেশে, আপনি এই কাজটিকে পরিপূর্ণতা আনতে পারেন।
পাঠ তৈরি করার সময়, নিম্নলিখিত উপাদান ব্যবহার করা হয়েছিল: . মূল, আদি, লেখকের কলম থেকে তাজা, পোর্টফোলিও পৃষ্ঠা সেখানে অবস্থিত।
সবার জন্য শুভকামনা এবং সংক্ষিপ্ত গ্রীষ্মের বাকি অংশ উপভোগ করুন!
1. jQuery গ্যালারি ব্যবহার করে একটি পোর্টফোলিও বাস্তবায়ন করাআপনি যখন বাম কলামে মাউস কার্সার সরান তখন প্রজেক্ট থাম্বনেইল স্ক্রোল করুন। বিষয়বস্তু এলাকাটি প্রকল্পের নাম, বিবরণ এবং ব্যবহৃত প্রযুক্তির তালিকা সহ একটি বড় চিত্র প্রদর্শন করে। আপনি থাম্বনেইলগুলির মধ্যে স্থানান্তরিত হওয়ার সাথে সাথে একটি অত্যাশ্চর্য অ্যানিমেটেড প্রভাবের সাথে প্রকল্পের তথ্য একে অপরের সাথে পরিবর্তিত হয়। আপনি যখন বর্ণনা পৃষ্ঠায় একটি ছবিতে ক্লিক করেন, তখন এটি jQuery অ্যানিমেশন ব্যবহার করেও বড় হয়। আমি পুরো পোর্টফোলিও পৃষ্ঠার অত্যাশ্চর্য মার্জিত চেহারা নোট করতে চাই। ডেমো দেখুন।
2. CSS এবং jQuery ব্যবহার করে একটি পোর্টফোলিও সাইটের সুপার ইমপ্লিমেন্টেশনফটোগ্রাফারের পোর্টফোলিও ওয়েবসাইটের চমৎকার বাস্তবায়ন। যখন আপনি একটি মেনু আইটেমে ক্লিক করেন, একটি নির্দিষ্ট উচ্চতা এবং প্রস্থের বিষয়বস্তু সহ একটি এলাকা পর্দায় ছড়িয়ে ছিটিয়ে থাকা বর্গক্ষেত্র থেকে একত্রিত হয়। একটি নির্দিষ্ট এলাকায় আরো তথ্য ফিট করার জন্য, বিষয়বস্তু স্ক্রোল করা যেতে পারে. পোর্টফোলিও থেকে কাজগুলি প্রদর্শনের বাস্তবায়ন অস্বাভাবিক: যখন আপনি থাম্বনেইলে ক্লিক করেন, ফটোটি প্রদর্শিত হয় ব্যাকগ্রাউন্ড ইমেজ, যা ব্রাউজার উইন্ডোর আকার পরিবর্তন করার সাথে সাথে স্বয়ংক্রিয়ভাবে স্কেল হয়।
3. jQuery সহ পোর্টফোলিও ওয়ালএকটি অনলাইন পোর্টফোলিও তৈরির জন্য একটি আসল সমাধান। প্রজেক্ট ব্লক (থাম্বনেল এবং একটি লিঙ্ক সহ একটি সংক্ষিপ্ত বিবরণ) একটি সারিতে প্রদর্শিত হয়; প্রতিটি প্রকল্পে বেশ কয়েকটি থাম্বনেইল চিত্র থাকতে পারে, যার মধ্যে রূপান্তর তীর ব্যবহার করে করা হয়। লিঙ্কটিতে ক্লিক করলে একটি সম্পূর্ণ বিবরণ সহ একটি পৃষ্ঠা খোলে, যেখানে পাঠ্যটি স্ক্রোলিং সহ একটি নির্দিষ্ট উচ্চতার একটি আধা-স্বচ্ছ ব্লকে স্থাপন করা হয়। প্রকল্পের একটি মাপযোগ্য চিত্র পৃষ্ঠার পটভূমি হিসাবে ব্যবহৃত হয়। শান্ত দেখাচ্ছে - ডেমো দেখুন।
4. মসৃণ jQuery পৃষ্ঠা স্ক্রোলিংউল্লম্ব এবং অনুভূমিক স্ক্রোলিং বাস্তবায়ন।
5. jQuery প্লাগইন "ড্র্যাগেবল ইমেজ বক্স গ্রিড"বিষয়বস্তু ব্লক এবং ছবি সমন্বিত একটি টেনে আনা যায়। গ্রিডটি মাউস ব্যবহার করে টেনে আনা যায় (যেকোনো মাউস বোতাম টিপুন এবং পছন্দসই দিকে টেনে আনুন)। আপনি থাম্বনেইলে ক্লিক করলে, প্রধান চিত্রটি স্ক্রিনের পুরো প্রস্থটি পূরণ করতে প্রসারিত হয়। আপনি যখন পাঠ্য সহ একটি অন্ধকার ব্লকে ক্লিক করেন, তখন আরও বিশদ বিবরণ সহ একটি এলাকা খোলে।
6. এক-পৃষ্ঠার পোর্টফোলিও সাইটঅ্যানিমেটেড কন্টেন্ট পরিবর্তন সহ এক-পৃষ্ঠার ওয়েবসাইট। ডেমো পৃষ্ঠায়, প্রভাব দেখতে মেনু ট্যাবের মাধ্যমে নেভিগেট করুন।
7. ব্লক ডিসপ্লে টাইপ jQuery এ স্যুইচ করাএর সাথে jQuery প্লাগইনএবং "স্যুইচ ডিসপ্লে অপশন" আপনি পৃষ্ঠায় একটি সুইচ প্রয়োগ করতে পারেন, যার সাহায্যে ভিজিটর তথ্যের ট্যাবুলার ডিসপ্লে থেকে ব্লকের বিবরণ সহ সম্পূর্ণ ভিউতে স্যুইচ করবে। পোর্টফোলিও বাস্তবায়নের জন্য পারফেক্ট।
8. jQuery গ্যালারি এবং Google মানচিত্র সহ একটি রেস্টুরেন্ট ওয়েবসাইটের জন্য টেমপ্লেট৷একটি ক্যাফে ওয়েবসাইটের জন্য তৈরি একটি আসল jQuery সমাধান। টেমপ্লেটটি মেনু থেকে খাবার প্রদর্শনের জন্য একটি আকর্ষণীয় jQuery গ্যালারি প্রয়োগ করে। গ্যালারির ছবিগুলি ব্রাউজার উইন্ডোর আকারের উপর নির্ভর করে স্কেল করা হয়। প্রথমত, গ্যালারি একটি শিরোনাম সহ থাম্বনেইল ছবি প্রদর্শন করে এবং সংক্ষিপ্ত বিবরণখাবার, যখন পূর্ণ আকারের ছবিপটভূমিতে অন্ধকার দেখা যাচ্ছে। তীর বা মাউস চাকা ব্যবহার করে উপলব্ধ ফটোগুলির মধ্যে নেভিগেট করুন৷ গ্যালারি মোডে মাউস ক্লিক করলে বিবরণ সহ থাম্বনেইলগুলি মুছে যাবে এবং আপনাকে উইন্ডোর পুরো প্রস্থ জুড়ে প্রসারিত মূল বড় ছবিগুলি দেখতে অনুমতি দেবে৷ গ্যালারি থেকে সাইট মেনুতে ফিরে যেতে, উপরের ডানদিকের কোণায় লিঙ্কটিতে ক্লিক করুন। চটকদার jQuery গ্যালারী ছাড়াও, Google থেকে একটি মানচিত্র খুব কার্যকরভাবে টেমপ্লেটে একত্রিত করা হয়েছে।
9. প্লাজম দ্য ওয়াল প্লাগইনফটোগ্রাফ বা এইচটিএমএল ব্লক থেকে অনন্য "ওয়াল" তৈরি করতে যা মাউস ব্যবহার করে একটি নির্দিষ্ট এলাকার মধ্যে স্ক্রীন জুড়ে টেনে আনা যায়।
10. একটি বৃত্তে উপাদান প্রদর্শনের জন্য প্লাগইনএকটি প্রদত্ত ব্যাসের একটি বৃত্ত বরাবর পৃষ্ঠায় বিভিন্ন উপাদান প্রদর্শন করা।
11. স্থানধারক পৃষ্ঠা "উন্নয়নের অধীনে সাইট"পৃষ্ঠাটিতে একটি ই-মেইল ঠিকানা পাঠানোর ক্ষমতা রয়েছে, যা ডাটাবেসে রেকর্ড করা আছে এবং যেখানে সাইট খোলার বিষয়ে একটি বিজ্ঞপ্তি পাঠানো যেতে পারে। পৃষ্ঠাটি jQuery প্লাগইন Nivo Slider v-এর উপর ভিত্তি করে একটি ছোট স্লাইডশো দিয়েও সজ্জিত। 2.3।
12. QuickFlip 2 প্লাগইনএটির সাহায্যে, আপনি একটি লিঙ্কে ক্লিক করার সময় একটি ব্যবসায়িক কার্ড ঘোরানোর একটি আকর্ষণীয় প্রভাব তৈরি করতে পারেন।
13. JQuery ক্লিক মানচিত্রধারণা হল ব্যবহারকারীর ক্লিক ট্র্যাক করা। ডেমো পৃষ্ঠায় প্লাগইনটি কার্যকর দেখতে মাউসে ক্লিক করুন এবং তারপর "বিশ্লেষণ" বোতামে ক্লিক করুন। এবং আপনি যেখানে মাউস দিয়ে ক্লিক করেছেন সেই পয়েন্টগুলি একটি স্বচ্ছ ব্যাকগ্রাউন্ডে প্রদর্শিত হবে।
কিউট উপলব্ধি অন-স্ক্রীন কীবোর্ড. আপনি কখনই জানেন না, এটি কিছুর জন্য কাজে আসবে।
15. jQuery স্টিকি নোটনোটের শীট বাস্তবায়ন। পাঠ্য সম্পাদনা করা যেতে পারে, এবং নোটগুলি নিজেরাই মুছে ফেলা বা স্ক্রিনের চারপাশে সরানো যেতে পারে। একটি উদাহরণ দেখতে, ডেমো পৃষ্ঠার "ডেমো" ট্যাবে যান।
16. jQuery রেটিং 17. HoverAttributeআকর্ষণীয় লিঙ্ক ডিজাইন: আপনি যখন একটি লিঙ্কের উপর হোভার করেন, তখন এর অ্যাঙ্কর পরিবর্তন হয়। ঠাণ্ডা লাগছে।
18. রেজিস্ট্রেশন ফর্মের জন্য jQuery অভিনব ক্যাপচারেজিস্ট্রেশন ফর্মের জন্য ক্যাপচা বাস্তবায়ন। প্লাগইন হল সংখ্যার একটি সেট যেগুলিকে টেনে এনে আরোহী ক্রমে সেট করতে হবে। এটি নিশ্চিত করার একটি আকর্ষণীয় উপায় যে নিবন্ধনটি একটি বাস্তব ব্যক্তির দ্বারা করা হচ্ছে এবং একটি রোবট নয়।
স্ক্রিনের নীচে বোতামগুলি রয়েছে যা আপনি পৃষ্ঠাটিকে মসৃণভাবে উপরে বা নীচে স্ক্রোল করতে ব্যবহার করতে পারেন।
20. অনুবাদক। jQuery প্লাগইন "jTextTranslate"প্লাগইনটি Google Language API ব্যবহার করে এবং Google দ্বারা প্রদত্ত যেকোনো ভাষায় পাঠ্য অনুবাদ করতে পারে। অনুবাদ করতে, আপনাকে অনুচ্ছেদের পাশের আইকনে ক্লিক করতে হবে এবং ড্রপ-ডাউন তালিকা থেকে আপনি যে ভাষাতে অনুবাদ করতে চান সেটি নির্বাচন করতে হবে।
21. পৃষ্ঠা নেভিগেশনের জন্য jQuery প্লাগইনপৃষ্ঠা নেভিগেশনের জন্য স্ক্রলিং লিঙ্কগুলির চমৎকার বাস্তবায়ন। jQuery ব্যবহার করে বাস্তবায়িত।
22. jQuery প্লাগইন "নোটস"এই jQuery প্লাগইন আপনাকে আপনার ওয়েবসাইটে "কাগজ" নোটগুলি বাস্তবায়নের অনুমতি দেবে।
23. jQuery প্লাগইন "Catch404" 24. jQuery প্লাগইন jBreadCrumbঅ্যানিমেটেড ব্রেডক্রাম্ব নেভিগেশন চেইন তৈরির জন্য প্লাগইন
25. "রিল" প্লাগইন 26. jQuery "ড্যান্স ফ্লোর" প্লাগইনএকটি পণ্য পৃষ্ঠা বাস্তবায়নের জন্য jQuery প্লাগইন। আপনি যখন একটি পণ্যের ছবিতে ক্লিক করেন, তখন তার বিবরণ উপস্থিত হয়।
27. jQuery প্লাগইন "3D লেবেল ক্লাউড" 28. ভলিউমেট্রিক CSS বোতাম 29. অ্যানিমেটেড অনুভূমিক পৃষ্ঠা স্ক্রোলিংউল্লম্ব পৃষ্ঠা স্ক্রোলিং এর jQuery প্রভাব। এক-পৃষ্ঠার ওয়েবসাইট এবং পোর্টফোলিও ওয়েবসাইটগুলি বাস্তবায়নের জন্য উপযুক্ত। প্রভাব দেখতে, ডেমো পৃষ্ঠায় মেনু আইটেম ক্লিক করুন.
30. jQuery প্লাগইন "রেটিং সিস্টেম"কোনো কিছুর মূল্যায়ন বাস্তবায়নের জন্য jQuery প্রভাব। চেনাশোনাগুলির রঙ এবং তাদের নীচের পাঠ্যগুলি তাদের মধ্যে কোনটির উপর মাউস কার্সার ঘোরাফেরা করছে তার উপর নির্ভর করে পরিবর্তিত হয়৷
31. jQuery প্যানেল ম্যাজিকএকটি প্লাগইন যা সাইট নেভিগেশন প্রয়োগ করে। এই ক্ষেত্রে, আপনার সাইটটি নথিগুলির একটি গ্রিড হিসাবে উপস্থাপিত হয়, যার মধ্যে একটি আকর্ষণীয় jQuery প্রভাবের সাথে একটি রূপান্তর করা হয়।
আপনি সহজেই ছোট ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে এই প্লাগইন ব্যবহার করতে পারেন। এটি পোর্টফোলিও ওয়েবসাইটগুলিতেও ভাল দেখাবে।
32. Mootools-এ লোডিং ইন্ডিকেটর, "MoogressBar" প্লাগইনকার্যকরী লোডিং সূচক।
33. Mootools প্লাগইন "CwComplete"ক্ষেত্রটি পূরণ করার সময়, প্লাগইনটি প্রম্পট করবে সম্ভাব্য বিকল্পসঙ্গে পূরণ করতে Ajax ব্যবহার করে, এবং এটি ফিল্টার করবে এবং শুধুমাত্র সেই বিকল্পগুলি দেখাবে যা ইতিমধ্যে ক্ষেত্রে প্রবেশ করা পাঠ্যের সাথে মেলে।
34. jQuery এবং CSS3 ব্যবহার করে দারুণ AJAX চ্যাটকথোপকথন শুরু করার আগে, দর্শককে তার ডাকনাম এবং ই-মেইল লিখতে হবে। ডান কলাম দেখায় কতজন লোক চ্যাটে লগ ইন করেছে। ব্যবহৃত প্রযুক্তি: PHP, MySQL, jQuery, CSS।
35. "একটি প্রকল্প প্রস্তাব করুন" পৃষ্ঠার বাস্তবায়নদর্শকরা একটি নতুন প্রস্তাব যোগ করতে পারেন বা বিদ্যমান একটির জন্য ভোট দিতে পারেন৷ যারা তাদের শ্রোতারা সাইট সম্পর্কে কী ভাবেন তা খুঁজে বের করতে চান তাদের জন্য একটি চমৎকার সমাধান। আপনি আপনার প্রকল্পের আরও উন্নয়নের জন্য নতুন ধারণা সংগ্রহ করতে এই পৃষ্ঠাটি ব্যবহার করতে পারেন। ব্যবহৃত প্রযুক্তি: PHP, MySQL, jQuery, CSS
36. এর সাথে ভোট/পোল বাস্তবায়ন পিএইচপি ব্যবহার করেএবং jQuery 37. Ajax "TinyEditor"-এ ভোট দেওয়াসাইটে সমীক্ষার সঠিক বাস্তবায়ন। ব্যবহৃত প্রযুক্তি: JQuery, Ajax, PHP এবং MySQL।
একটি ওয়েবসাইটে ভোট প্রয়োগের জন্য একটি খুব আকর্ষণীয় সমাধান। ব্লকগুলিকে উপরে এবং নীচে টেনে নিয়ে এবং মাউসের সাহায্যে ছবিগুলি দখল করে, আপনি সেগুলিকে যে কোনও ক্রমে পৃষ্ঠায় সাজাতে পারেন৷ আপনি যত উপরে ব্লকটি ছেড়ে যাবেন, তত ভাল আপনি এটিকে রেট দেবেন এবং সেই অনুযায়ী, যদি ব্লকটি একেবারে নীচে স্থাপন করা হয়, তার মানে আপনি এটি সবচেয়ে কম পছন্দ করেছেন। আপনি পছন্দসই ক্রমানুসারে ব্লক স্থাপন করার পরে, আপনাকে অবশ্যই "পোল জমা দিন" বোতামে ক্লিক করতে হবে যাতে ভোটটি বিবেচনায় নেওয়া হয়। ফলাফল পৃষ্ঠা ভোটদানের ফলাফল এবং ভোট প্রদানকারী দর্শকদের সংখ্যা প্রদর্শন করে। ব্যবহৃত প্রযুক্তি: CSS, PHP, MySQL, jQuery।
প্রবেশ করা তথ্যের সঠিকতা যাচাই সহ একটি সাধারণ Ajax মন্তব্য করার সিস্টেম। মন্তব্য একটি ডাটাবেসে সংরক্ষণ করা হয়. ব্যবহার করে বাস্তবায়িত: PHP, MySQL, CSS, jQuery।
40. ফাইল ডাউনলোডের সংখ্যার কাউন্টার 41. সাথে পৃষ্ঠায় নোট পিএইচপি ব্যবহার করেব্যবহৃত প্রযুক্তি: PHP, jQuery, CSS।
আপনি যখন মেনু আইটেমগুলির মাধ্যমে নেভিগেট করেন, তখন পৃষ্ঠাটি পুনরায় লোড না করেই সামগ্রী লোড হয়৷ ব্যবহৃত প্রযুক্তি: PHP, jQuery, CSS।
43. jQuery অনুসন্ধান Google থেকে প্রযুক্তি ব্যবহার করে সাইটেGoogle AJAX অনুসন্ধান API ব্যবহার করে সাইট অনুসন্ধানের বাস্তবায়ন। আপনি ভিজিটরকে আপনার সাইটে এবং ইন্টারনেট উভয়েই অনুসন্ধান করার সুযোগ দিতে পারেন। এই ক্ষেত্রে, অনুসন্ধানটি কেবল সাইটের পৃষ্ঠাগুলির দ্বারা নয়, চিত্র এবং মাল্টিমিডিয়া ফাইলগুলির দ্বারাও করা যেতে পারে।
44. একটি চিত্রের উপর একটি বিবরণ ওভারলে করার jQuery প্রভাবএকটি খুব আকর্ষণীয় প্রভাব যা একটি পোর্টফোলিও বাস্তবায়নে ব্যবহার করা যেতে পারে। আপনি যখন একটি ছবিতে ক্লিক করেন, তখন এটি একটি স্বচ্ছ ব্যাকগ্রাউন্ডের সাথে অন্ধকার হয়ে যায় এবং একটি ক্যাপশন প্রদর্শিত হয় যা আপনাকে কী মনোযোগ দিতে হবে তা বর্ণনা করে৷
45. jQuery ব্যবহার করে একটি প্রশ্ন ও উত্তর পৃষ্ঠা বাস্তবায়ন করাসাইটে FAQ পৃষ্ঠার jQuery বাস্তবায়ন। পৃষ্ঠার শীর্ষে প্রশ্নের একটি তালিকা প্রদর্শিত হয়। যখন আপনি একটি প্রশ্নে ক্লিক করেন, পৃষ্ঠাটি আপনার নির্বাচিত একটিতে মসৃণভাবে স্ক্রোল করে এবং সক্রিয় প্রশ্নটি তার উত্তর সহ একটি ভিন্ন রঙে হাইলাইট হয়। প্রশ্নের তালিকায় ফিরে আসার একটি লিঙ্ক সক্রিয় উত্তর ক্ষেত্রেও উপস্থিত হয়।
46. Ajax-এ ওয়েবসাইট। পৃষ্ঠাটি পুনরায় লোড না করেই সামগ্রী লোড হয় 47. jQuery ব্যবহার করে পটভূমি এবং পাঠ্যের রঙ পরিবর্তন করাআপনি যখন এটির উপর মাউস ঘোরান তখন রঙ পরিবর্তন হয়। আপনি এলোমেলোভাবে রঙ পরিবর্তন করতে পারেন.
48. jQuery ব্যবহার করে সাইট গাইডএই আকর্ষণীয় প্লাগইনটি ব্যবহার করে, আপনি ভিজিটরকে আপনার সাইটের প্রধান ফাংশনগুলির সাথে পরিচয় করিয়ে দিতে পারেন যদি তিনি প্রথমবার এটিতে যান। যখন পৃষ্ঠা লোড হয়, তখন উপরের ডানদিকে একটি ব্লক প্রদর্শিত হয় যা আপনাকে সাইটটি ঘুরে দেখতে বলে। যদি একজন দর্শক প্রথমবার আপনার সাইট পরিদর্শন করেন, তবে তিনি প্রধান ফাংশনগুলির সাথে নিজেকে পরিচিত করতে একটি ছোট গাইড ব্যবহার করতে পারেন। এই ক্ষেত্রে, পৃষ্ঠাটি অন্ধকার করা হয় এবং প্রতিটি ধাপে প্রয়োজনীয় ব্লকগুলি চিহ্নিত করা হয়। যদি ভিজিটর ইতিমধ্যেই আপনার সাইটে আগে থেকে থাকে, তাহলে সে কেবল সাইটটি ঘুরে দেখার জন্য উইন্ডোটি বন্ধ করে দিতে পারে।
49. জয়রাইড কিট ওয়েবসাইটের ভার্চুয়াল সফরএই প্লাগইন ব্যবহার করে, আপনি ভিজিটরকে পেজের প্রধান কার্যকারিতার সাথে পরিচয় করিয়ে দিতে পারেন। এটি উপাদানগুলির একটি অনুক্রমিক পপ-আপ বিবরণের আকারে করা হয়। দর্শক নেক্সট বোতামে ক্লিক করে সমস্ত টিপস দেখতে পারেন, অথবা ক্রস ব্যবহার করে অনলাইন ট্যুরটি বন্ধ করতে পারেন (যদি তিনি এই পৃষ্ঠায় প্রথমবার না আসেন)।
শুরু করুন
