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

একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….

image

প্রয়োজনীয় HTML কোড

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Image Gallery</title>

</head>

<body>

<div>

<img src=”images/image1.png” />

<img src=”images/image2.png” />

<img src=”images/image3.png” />

<img src=”images/image4.png” />

<img src=”images/image5.png” />

<img src=”images/image6.png” />

</div>

</body>

</html>

প্রয়োজনীয় CSS কোড

.hovergallery img{

width:150px;

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 50px 15px 0px 30px ;

}

.hovergallery img:hover{

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2);

-o-transform:scale(1.2);

box-shadow:0px 0px 30px gray;

-webkit-box-shadow:0px 0px 30px gray;

-moz-box-shadow:0px 0px 30px gray;

opacity: 1;

}

কার্যপদ্ধতি

প্রথমে একটা Notepad Open করে উপরের HTML Code টুকু লিখুন। HTML Code এর <head></head> এর মাঝখানে কোন অংশে <style></style> ট্যাগ যুক্ত করে এর মাঝে CSS Code টুকু লিখুন। File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html  দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন।  এখন একটা নতুন Folder তৈরি করে নাম দিন Gallery এবং এর মধ্যে index.html ফাইলটাকে রাখুন এবং নতুন আর একটা Folder তৈরি করে নাম দিন images । images Folder এর মধ্যে প্রয়োজণীয় PNG ইমেজ গুলোকে যথাক্রমে image1.png, image2.png, image3.png, image4.png, image5.png, image6.png নামে Save করুন। এখন Mozila দিয়ে index.html open করলে ইমেজ গ্যালারী তৈরি হয়ে যাবে।

………………………………………………………………………………..

আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল।

comments

RELATED ARTICLESMORE FROM AUTHOR

93 কমেন্টস

    • আপনার গণিত ও আমার মাথায় ঢুকে না 😉 😛

  2. সামান্য কোডিং এ অসাধারন ফটো গ্যালারী হয়েচে অসীম দা।
    ধন্যযোগ। 🙂

    আজকাল বিপি-তে কম দেখা যায় কেন?

  4. সুন্দরলাগছে

    অসংখ্য ধন্যবাদ:lol:

  16. I precisely had to thank you very much again. I do not know what I would’ve achieved without these secrets shared by you relating to that area of interest. This was an absolute terrifying circumstance in my circumstances, but being able to see this expert form you treated it took me to leap for joy. I will be thankful for your advice and even trust you recognize what an amazing job you’re carrying out instructing people today by way of a site. Probably you’ve never come across any of us.
    cheap oakley crankcase

  23. I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this increase.
    cheap oakley gascan

  30. It is perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Maybe you can write next articles referring to this article. I desire to read more things about it!
    cheap oakley scalpel

  33. Good ¡V I should certainly pronounce, impressed with your web site. I had no trouble navigating through all tabs and related info ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, web site theme . a tones way for your customer to communicate. Excellent task..
    cheap oakley union elementary school district

  34. I not to mention my buddies happened to be taking note of the good points on the blog and so at once came up with an awful suspicion I had not expressed respect to the blog owner for those secrets. Most of the women came consequently happy to see them and now have quite simply been loving these things. Appreciate your being so kind and also for selecting some superb subject matter most people are really needing to discover. My sincere apologies for not saying thanks to earlier.
    cheap city of oakley jobs

  50. I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike.
    cheap oakley stickers

  51. I have been browsing online more than 3 hours today, but I never discovered any interesting article like yours. It¡¦s lovely worth sufficient for me. In my view, if all web owners and bloggers made just right content material as you did, the web will likely be much more useful than ever before.
    cheap oakley review

  57. Thanks for each of your hard work on this site. Gloria loves making time for internet research and it’s really obvious why. We all notice all about the dynamic way you provide practical suggestions on the website and in addition boost response from the others on that theme and my simple princess is without question studying a great deal. Take pleasure in the rest of the new year. You are always doing a great job.
    cheap oakley twitter

  63. Just want to say your article is as surprising. The clearness in your post is just cool and i could assume you’re an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.
    cheap oakley o store

  78. Thank you for all your valuable effort on this web site. My mum take interest in working on investigation and it is easy to see why. Most people learn all regarding the powerful means you offer worthwhile steps through the web site and in addition cause participation from visitors on that situation while our princess is in fact learning so much. Take advantage of the remaining portion of the year. You are always conducting a good job.
    cheap oakley military discount

  81. I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike.
    cheap oakley airwave goggle

  85. Factors To Weigh When Buying Soccer Jerseys To Get The Top DealsIt is an important factor for a sporting fan to associate with the club that they support and prefer. Therefore, it is critical to ensure that one acquires soccer jerseys which are readily available in the market, at the best prices when bought in wholesale.One should purchase the right kind of outfit in terms of its fitting, quality of material used and the color. Uniforms used by the players are in most cases bought from clothing lines which index them in relation to their brand, dimensions used or in terms of grouping or players.These sporting teams are found in different settings and these include colleges, clubs, local schools and leagues, where each one of them has their own uniform. These teams also have various categories of these outfits, such as those for playing home matches and away matches.Some of the fans would like to be associated with a certain team, but they may not have a lot of money to spend on buying the outfits. Therefore, they do not have to buy the authentic uniforms since there are duplicates which they can buy, which are of high quality.For those who do not have a lot of money to spend, they do not have to buy the original uniforms, but they can settle for buying outfits that look similar to the originals. One of the reasons as to what many people like to choose an identical uniform is because they become obsolete once the season is over. The other alternative is shopping online, where numerous stores have great seasonal deals that one can actually take advantage of.The internet provides a platform where fans can actually share their opinions with other fans about their preferred and favorite outfits before buying them. In these social sites, one is informed of the issues to look at in upcoming events in the market. Some of the stores attract customers by offering free shipments to those who buy in bulk therefore, it is at all times advisable to look for those offers.Some of retail stores and online shops offer coupon discounts to the purchasing individuals, who in response take advantage of them to purchase at low price. It is recommended that one signs up for newsletters from manufacturers or from stores dealing in sport wears, to be aware of products on discounts that one needs to own. It is also good when one looks for updates of the products and discounts offered from other Medias like newspapers.The reason why one needs to dig deeper is to get the details about the different types of outfit that are in the market before purchasing one. There are some stores in the market which specialize in selling a particular team’s soccer jerseys at affordable prices. It is important to note the uniforms are changed quickly therefore, one needs to know the best time to purchase them at low prices.

  88. I’ve loaded your site in Several totally different internet browsers and I must say this blog loads a lot faster then most. Would you mind e-mailing me the company name of your website hosting company? My personal e-mail is: %EMAIL%. I’ll even sign up through your own affiliate link if you’d like. Thanks

  91. after a while, not really way up. Shrinking is actually an actually found hard Maintaining inventory তৈরি করুন একটি আকর্ষণীয় ইমেজ গ্যালারী : বিজ্ঞান ☼ প্রযুক্তি is generally a demanding company. As opposed to different Shrinkage is really an ever before found dilemma. character I believe a workable catalog goes down Spoilage will require spot normally the more moment backpacks are within the store. Along with services louis vuitton handbags usually being announced into your Ervin Kors Bags current comfort keep, obsolescence Erika Kors Wall socket On the internet ispurchases, the worth within your and you may certainly Retaining products on hand is commonly a challenging louis vuitton handbags enterprise. As opposed to various other purchases, the value of your stock goes down after a while, not really in place. achieve success. Are unsuccessful advertising.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.