semoga menjadi ilmu yang bermanfaat untuk orang banyak.
It is almost 2016. And now responsive/ fluid design became very trendy things for websites/ blogs. Not only trendy but it is very necessary for websites to have responsive design, as high percentage of users going mobile.
So here I came up with a responsive slideshow widget for Blogger webmasters. This slideshow widget is build with Camera Slideshow jQuery Plugin, which is an open source project of Pixedelic
Features of Responsive Blogger Slideshow Widget (Camera Slideshow)
Fully ResponsiveCross-Browser Supported 33 Different Colors SkinLots of options to customize it in your wayjQuery Easing SupportedCustom jQuery Mobile for mobile devices compatibility.
Check out the demo (Static & Blogger version) of Responsive Slideshow Widget
I Would Say ‘One Of The Best’ If You Ask For Responsive Slider/Slideshow Plugin
There is many beautiful jQuery slider/ slideshow plugin out there. But I found that most of them (slider with lots of features) aren’t fully responsive. Another dependable responsive slider I found is FlexSlider, which is very popular for its simplicity. Alongside responsiveness this Camera Slideshow plugin has some other cool features too including..
Lots of transition effectsPlay/Pause, Thumbnail Navigation, ToolTip Navigation etc. HTML5 Data Attribute supported. By using it, many properties can be added to slide. For example a link/URL, thumbnail URL/ slider image URL etc.You don’t have to worry about image size or aspect ratio. Images will be re-sized to fit automatically with the slideshow box. When images are larger than container / slideshow box, or have different aspect ratio then they will be cropped (from middle) automatically with maintaining their aspect ratio, that’s mean they won’t get Stretch.Video Supported.
I recommend to add larger images than the container/slideshow box or at least same size of the container.
Get The Code!
To add this slideshow to your BlogSpot blog, just Copy and Paste the code given below into a HTML/Javascript Widget.
Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript Copy the code below and paste on it. Then Save it. And you’re done!.
<!--------------------------------------------- Blogger Slideshow Widget by http://imagesliderforblogger.blogspot.com/ org. by dimpost.com -----------------------------------------------> <!-- Camera_Slideshow Styles --> <link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'> <!-- Camera Slideshow Scripts --> <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script> <script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script> <script type='text/javascript'> jQuery(function() { jQuery('#camera_wrap_1').camera({ time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one transPeriod: 1200, // length of the sliding effect in milliseconds thumbnails: false, // thumnails & tooltip is controlled by it pagination: true, // only when "pagination" is set to "false" thumbnails will be visible fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects hover: false, // Pause on hover height: '50%' // slideshow height (50% is default) }); }); </script> <style type="text/css"> .fluid_container { margin: 0 auto; /* aling centered */ width: 100%; max-width: 900px; overflow: hidden; } /* Blogger CSS Conflict Fix */ .camera_pag_ul { border: none !important; background: none !important; } .camera_pag_ul li { float: inherit !important; padding: inherit !important; } .camera_pag_ul { margin: 0 !important; border: 0 !important; } </style> <div class="fluid_container"> <!-- camera_slideshow camera_wrap--> <div class="camera_wrap" id="camera_wrap_1"> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg"> <div class="camera_caption fadeFromBottom"> Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em> </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg"> <div class="camera_caption fadeFromBottom"> It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em> </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg"> <div class="camera_caption fadeFromBottom"> <em>It's completely free</em> (even though a donation is appreciated) </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg"> <div class="camera_caption fadeFromBottom"> Camera slideshow provides many options <em>to customize your project</em> as more as possible </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg"> <div class="camera_caption fadeFromBottom"> It supports captions, HTML elements and videos. </div> </div> </div> <!-- #camera_wrap_1 --> </div> <!-- .fluid_container -->
Customization Options:
Look at the code below. This is where you customize the slideshow. Play with it. (Read code comments for get easily).
Slideshow Options
time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one transPeriod: 1200, // length of the sliding effect in milliseconds thumbnails: false, // thumnails & tooltip is controlled by it pagination: true, // only when "pagination" is set to "false" thumbnails will be visible fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects hover: false, // Pause on hover height: '50%' // slideshow height (50% is default)
To adjust the slider size edit this CSS rule from the main code
.fluid_container { margin: 0 auto; /* aling centered */ width: 100%; max-width: 900px; overflow: hidden; }
« Prev Post
Next Post »
Kholil Khoirul Muluk, S.H.I.
Alumni Universitas Islam Negeri Lampung.
