JQuery_Part 2_ইমেজ Expand Effect সংযোগ করা
ইমেজ Expand Effect সংযোগ করা
লক্ষ্য করুন আমাদের তৈরী করা Web site এর Products ,php ফাইলে কিছু ইমেজ আছে । এগুলিতে আমরা Expand Effect সংযোগ করবো। এতে এর উপর মাউস নিলে ইমেজ গুলি বড় হতে থাকবে । এজন্য আমরা JQuery লাইব্রেরী থেকে expand .Js নামে একটি ফাইল ব্যবহার করবো। চলুন শুরু করা যাক।
- My style final.xml ফাইলটি খুলে expando নামে একটি class তৈরী করুন।
- Product ,php ফাইল খুলে ১লাইনের নিন্মোত্ত Script লিখুন Imageএর লিংক গুলির ঠিক উপরে এবং প্রতিটি ,<Img> ট্যাগ Sample এর পাশেexpando নামে আরেকটি class লিখে দিন কোডিং নিচের মত ।
img.expando{ border: none; vertical-align: top; }
Product পেজের কোডিং
- এখন JQuery ফোল্ডারে অবস্থিত JS &JQ Project ফোল্ডার থেকে expand.JS ফাইলটি কপি করে Mysite ফোল্ডারে পেস্ট করে দিন।
<?php
session_start();
if(isset($_SESSION['bappi']))
echo "Welcome our Product page";
else
header("location:login.php");
?>
<?php
include ("include/header.php");
?>
<span class="title">Image Gallery </span><br />
<?php
echo $_SESSION['bappi'];
echo "<br /> <font face='Verdana' size='4' color=red> Thanks for logging in</font>";
?
>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<?php
include ("include/footer.php");
?>
- ব্যাস ব্রাউজারে সাইট খুলে Product পেজে যান এবং ইমেজের উপর মাউস নিন ইমেজটি বড় হবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book. Book's CD Link below...
part1_ওয়েব পেজ Counter যোগ করা ,ইমেজ Expand Effect সংযোগ করা ও Element Fader তৈরী করা
part2_ইমেজ Expand Effect সংযোগ করা
part3_Element Fader তৈরী করা
part4_Animated-Gif ইমেল সংযোজন
part5_Slide Show সংযোজন
