{"id":1657,"date":"2012-04-20T04:53:03","date_gmt":"2012-04-20T08:53:03","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=1657"},"modified":"2012-04-20T05:07:59","modified_gmt":"2012-04-20T09:07:59","slug":"photo-sliding-gallery-using-html","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/photo-sliding-gallery-using-html\/","title":{"rendered":"Photo Sliding Gallery using HTML"},"content":{"rendered":"<style>\n#sliding {\n  padding:0; \n  margin:0 0 40px 0; \n  list-style-type:none; \n  overflow:visible; \n  width:495px; \n  height:240px; \n  background:transparent url(http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/back.jpg);\n  }\n#sliding li {\n  float:left;\n  }\n#sliding li a {\n  display:block; \n  height:240px;\n  width:28px; \n  float:left; \n  text-decoration:none; \n  border-right:1px solid #fff; \n  cursor:default;\n  }\n#sliding li a img {\n  width:28px; \n  height:240px; \n  border:0;\n  }\n#sliding li a:hover {\n  background: transparent; \n  width:320px;\n  }\n#sliding li a:hover img {\n  width:320px;\n  }<\/p>\n<\/style>\n<ul id=\"sliding\">\n<li><a href=\"#nogo\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic1.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic2.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic3.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic4.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic5.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic6.jpg\"\/><\/a><\/li>\n<li><a href=\"#\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/pic7.jpg\"\/><\/a><\/li>\n<\/ul>\n<p><strong>Final Preview:<\/strong><\/p>\n<p><strong>Step:1<\/strong> Open a new HTML Document in dreamweaver.<\/p>\n<p><strong>Step:2<\/strong> Paste the following  code in the HTML Document.<\/p>\n<p style=\"background-color:#f5f5f5; width: 500px; border: #999 solid 0.01em; padding: 10px 10px 0 10px;\">&lt;ul id=&quot;sliding&quot;&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic1.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic2.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic3.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic4.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic5.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic6.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n  &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt;<br \/>\n  &lt;img src=&quot;pic7.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>\n&lt;\/ul&gt;<\/p>\n<p><strong>Step:3<\/strong> Create embedded &lt;style&gt; style below &lt;head&gt; tag. Add the following CSS Code:<\/p>\n<p style=\"background-color:#f5f5f5; width: 500px; border: #999 solid 0.01em; padding: 10px 10px 0 10px;\">&lt;style&gt;<br \/>\n  #sliding {<br \/>\npadding:0; <br \/>\nmargin:20px 0 0 20px; <br \/>\nlist-style-type:none; <br \/>\noverflow:hidden; <br \/>\nwidth:495px; <br \/>\nheight:240px; <br \/>\nbackground:#fff url(back.jpg);<br \/>\n}<br \/>\n#sliding li {<br \/>\nfloat:left;<br \/>\n}<br \/>\n#sliding li a {<br \/>\ndisplay:block; <br \/>\nheight:240px;<br \/>\nwidth:28px; <br \/>\nfloat:left; <br \/>\ntext-decoration:none; <br \/>\nborder-right:1px solid #fff; <br \/>\ncursor:default;<br \/>\n}<br \/>\n#sliding li a img {<br \/>\nwidth:28px; <br \/>\nheight:240px; <br \/>\nborder:0;<br \/>\n}<br \/>\n#sliding li a:hover {<br \/>\nbackground:#eee; <br \/>\nwidth:320px;<br \/>\n}<br \/>\n#sliding li a:hover img {<br \/>\nwidth:320px;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<p><strong>Step:4<\/strong> Place required images inside your HTML file folder.<\/p>\n<p>Now run the Program.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Final Preview: Step:1 Open a new HTML Document in dreamweaver. Step:2 Paste the following code in the HTML Document. &lt;ul id=&quot;sliding&quot;&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic1.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic2.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic3.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic4.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic5.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic6.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#nogo&quot;&gt; &lt;img src=&quot;pic7.jpg&quot;\/&gt;&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; Step:3 Create embedded &lt;style&gt; style [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[90,6,5],"tags":[140,138,141,139],"class_list":["post-1657","post","type-post","status-publish","format-standard","hentry","category-html","category-web-design","category-web-design-tips","tag-photo-gallery","tag-photo-sliding-gallery","tag-photo-sliding-gallery-css","tag-sliding-gallery"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=1657"}],"version-history":[{"count":28,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1657\/revisions"}],"predecessor-version":[{"id":1694,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1657\/revisions\/1694"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=1657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=1657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=1657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}