New Design Image Gallery With Thumbnail

New Design Image Gallery With Thumbnail

Untuk menghindari adanya Image Gallery yang cukup panjang dan mengurangi space maka kita bisa gunakan metode New Design Image Gallery With Thumbnail dengan contoh code sebagai berikut ini. Anda bisa lakukan modifikasi untuk disesuaikan dengan space pada website anda. 

Selamat Mencoba !

<center> <div class="slider"> <input type="radio" name="slide_switch" id="id1"/> <label for="id1"><checked="checked"/> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7oTZlnJmyeLJywSxBMTld_HTw9j3HVZqfVOErng9JVhbOfPTm2ke-NGLgYzCftOoNXvOlDfr6ey2Aioz3fV6rukSptqndcguW_eM8PxUOLL56HyHWdqD4Xu0lHELe5DgciPl10QKO7Ec/s640/Six+Goswami+Sad+Goswami.png" width="40"/> </checked="checked"></label> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7oTZlnJmyeLJywSxBMTld_HTw9j3HVZqfVOErng9JVhbOfPTm2ke-NGLgYzCftOoNXvOlDfr6ey2Aioz3fV6rukSptqndcguW_eM8PxUOLL56HyHWdqD4Xu0lHELe5DgciPl10QKO7Ec/s640/Six+Goswami+Sad+Goswami.png"/> <input type="radio" name="slide_switch" id="id2" checked="checked"/> <label for="id2"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N52DFL4CG01H-abtMibhSiND6NBtZ5On2ygN119Lz7_MDpd1STfNTJ7otYwQkmKEYPc6RD108DX2u4xiNBr12CyOuP5QPuV9F2qUVCuT8NDuTwo81oJAXR191G_qV-4GFBg6nxRPsgPN/s400/Srila+Bhaktisiddanta+Sarasvati+Goswami+Maharaj+08+Jul+2016.png" width="40"/> </label> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N52DFL4CG01H-abtMibhSiND6NBtZ5On2ygN119Lz7_MDpd1STfNTJ7otYwQkmKEYPc6RD108DX2u4xiNBr12CyOuP5QPuV9F2qUVCuT8NDuTwo81oJAXR191G_qV-4GFBg6nxRPsgPN/s400/Srila+Bhaktisiddanta+Sarasvati+Goswami+Maharaj+08+Jul+2016.png"/> <input type="radio" name="slide_switch" id="id3"/> <label for="id3"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnicfFQldT24L09MhR5i7t3I6WGZBqdHqLG1AKhkQDlKjaR63AK5q2FudoTjq86gdpc-uvHz6bB0rjUIC1NaZd0BaRYVg5dlETyNvjyaS1b7_NYjEyo-2Kzy2wbutGolz1-C_SHKl5x8/s320/Srila+Bhaktivinoda+Thakura+-A.jpg " width="40"/> </label> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnicfFQldT24L09MhR5i7t3I6WGZBqdHqLG1AKhkQDlKjaR63AK5q2FudoTjq86gdpc-uvHz6bB0rjUIC1NaZd0BaRYVg5dlETyNvjyaS1b7_NYjEyo-2Kzy2wbutGolz1-C_SHKl5x8/s320/Srila+Bhaktivinoda+Thakura+-A.jpg "/> <input type="radio" name="slide_switch" id="id4"/> <label for="id4"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsnybv0IUArcNsH8S0AxCHTf1hGzhfvMpws-msXOI_O_ZqgSJhuVmLcdUIvZq_4EslArJTH1R8gwFgC0yq7ml-6ckhCfTAtPQVEDmvYc4hhVVJ2VZMYY5a-aH9CuBXAU7rt_TEY40UKs/s320/Srila+Jagannatha+Dasa+Babaji+Maharaja+A3.jpg " width="40"/> </label> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsnybv0IUArcNsH8S0AxCHTf1hGzhfvMpws-msXOI_O_ZqgSJhuVmLcdUIvZq_4EslArJTH1R8gwFgC0yq7ml-6ckhCfTAtPQVEDmvYc4hhVVJ2VZMYY5a-aH9CuBXAU7rt_TEY40UKs/s320/Srila+Jagannatha+Dasa+Babaji+Maharaja+A3.jpg "/> <input type="radio" name="slide_switch" id="id5"/> <label for="id5"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6c7J-TjCSifoU9yPUL5YyOmZ-mR_RnqsfCPZ1U1wyeGFRu_84kITcPJaKd0A9gDEdtbluVxzxbxOodVM_ao9pi18JI29EQGDAX-2Ftyx1uoYcd-3l_aYJMlsrMywQnjAboScN0UCtEIc/s320/Srila+Gaurakisora+Dasa+Babaji+Maharaja+A3+-+pic+01.jpg " width="40"/> </label> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6c7J-TjCSifoU9yPUL5YyOmZ-mR_RnqsfCPZ1U1wyeGFRu_84kITcPJaKd0A9gDEdtbluVxzxbxOodVM_ao9pi18JI29EQGDAX-2Ftyx1uoYcd-3l_aYJMlsrMywQnjAboScN0UCtEIc/s320/Srila+Gaurakisora+Dasa+Babaji+Maharaja+A3+-+pic+01.jpg "/> </div> <script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script> <style> body .slider{ width: 400px; /*Same as width of the large image*/ position: relative; /*Instead of height we will use padding*/ padding-top:400px; /*That helps bring the labels down*/ margin: 10px auto; /*Lets add a shadow*/ box-shadow: 0 0.5px 1px -0.5px rgba(0, 0, 0, 0.75); } /*Last thing remaining is to add transitions*/ .slider>img{ position: absolute; left: 0; top: 0; transition: all 0.5s; } .slider input[name='slide_switch'] { display: none; } .slider label { /*Lets add some spacing for the thumbnails*/ margin: 5px 0 0 5px; border: 3px solid #999; float: left; cursor: pointer; transition: all 0.5s; /*Default style = low opacity*/ opacity: 0.6; } .slider label img{ display: block; } /*Time to add the click effects*/ .slider input[name='slide_switch']:checked+label { border-color: #666; opacity: 1; } /*Clicking any thumbnail now should change its opacity(style)*/ /*Time to work on the main images*/ .slider input[name='slide_switch'] ~ img { opacity: 0; transform: scale(1.1); } /*That hides all main images at a 110% size On click the images will be displayed at normal size to complete the effect */ .slider input[name='slide_switch']:checked+label+img { opacity: 1; transform: scale(1); } </style>