এই পোস্টের মেইন source – Allursolve.com

Jquey সম্পর্কে আপনাদের অনেকের ধারণা আছে । আজ আমি jquery ব্যবহার করে কি করে 3D Featured post gallery তৈরি করা যায় সে সম্পর্কে বিস্তারিত বলবো । প্রথমে পোস্টের শেষে দেয়া লাইভ ডেমো দেখে নিন ।

যে স্ক্রীপ্টগুলো আমাদের প্রয়োজন হবে –
০১. Jquery Javascript

এখানে কোন কারণে (আমি ঠিক জানিনা) Textarea code ঠিকমতো দেখাচ্ছে না, না দেখালেও সমস্যা নাই, আপনি অব্যশই মূল সোর্স ফাইলটা ডাউনলোড করবেন ।

০২. Gallery Javascript
<br /> /**<br /> * jquery.gallery.js<br /> * <a href=http://www.codrops.com rel=nofollow>http://www.codrops.com</a><br /> *<br /> * Copyright 2011, Pedro Botelho / Codrops<br /> * Free to use under the MIT license.<br /> *<br /> * Date: Mon Jan 30 2012<br /> */</p> <p>(function( $, undefined ) {</p> <p> /*<br /> * Gallery object.<br /> */<br /> $.Gallery = function( options, element ) {</p> <p> this.$el = $( element );<br /> this._init( options );</p> <p> };</p> <p> $.Gallery.defaults = {<br /> current : 0, // index of current item<br /> autoplay : false,// slideshow on / off<br /> interval : 2000 // time between transitions<br /> };</p> <p> $.Gallery.prototype = {<br /> _init : function( options ) {</p> <p> this.options = $.extend( true, {}, $.Gallery.defaults, options );</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> // support for 3d / 2d transforms and transitions<br /> this.support3d = Modernizr.csstransforms3d;<br /> this.support2d = Modernizr.csstransforms;<br /> this.supportTrans = Modernizr.csstransitions;</p> <p> this.$wrapper = this.$el.find('.dg-wrapper');</p> <p> this.$items = this.$wrapper.children();<br /> this.itemsCount = this.$items.length;</p> <p> this.$nav = this.$el.find('nav');<br /> this.$navPrev = this.$nav.find('.dg-prev');<br /> this.$navNext = this.$nav.find('.dg-next');</p> <p> // minimum of 3 items<br /> if( this.itemsCount < 3 ) {</p> <p> this.$nav.remove();<br /> return false;</p> <p> } </p> <p> this.current = this.options.current;</p> <p> this.isAnim = false;</p> <p> this.$items.css({<br /> 'opacity' : 0,<br /> 'visibility': 'hidden'<br /> });</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> this._validate();</p> <p> this._layout();</p> <p> // load the events<br /> this._loadEvents();</p> <p> // slideshow<br /> if( this.options.autoplay ) {</p> <p> this._startSlideshow();</p> <p> }</p> <p> },<br /> _validate : function() {</p> <p> if( this.options.current this.itemsCount - 1 ) {</p> <p> this.current = 0;</p> <p> } </p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> rightCSS = {<br /> '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> 'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'<br /> };</p> <p> leftCSS.opacity = 1;<br /> leftCSS.visibility = 'visible';<br /> rightCSS.opacity = 1;<br /> rightCSS.visibility = 'visible';</p> <p> }<br /> else if( this.support2d && this.supportTrans ) {</p> <p> leftCSS = {<br /> '-webkit-transform' : 'translate(-350px) scale(0.8)',<br /> '-moz-transform' : 'translate(-350px) scale(0.8)',<br /> '-o-transform' : 'translate(-350px) scale(0.8)',<br /> '-ms-transform' : 'translate(-350px) scale(0.8)',<br /> 'transform' : 'translate(-350px) scale(0.8)'<br /> };</p> <p> rightCSS = {<br /> '-webkit-transform' : 'translate(350px) scale(0.8)',<br /> '-moz-transform' : 'translate(350px) scale(0.8)',<br /> '-o-transform' : 'translate(350px) scale(0.8)',<br /> '-ms-transform' : 'translate(350px) scale(0.8)',<br /> 'transform' : 'translate(350px) scale(0.8)'<br /> };</p> <p> currentCSS = {<br /> 'z-index' : 999<br /> };</p> <p> leftCSS.opacity = 1;<br /> leftCSS.visibility = 'visible';<br /> rightCSS.opacity = 1;<br /> rightCSS.visibility = 'visible';</p> <p> }</p> <p> this.$leftItm.css( leftCSS || {} );<br /> this.$rightItm.css( rightCSS || {} );</p> <p> this.$currentItm.css( currentCSS || {} ).css({<br /> 'opacity' : 1,<br /> 'visibility': 'visible'<br /> }).addClass('dg-center');</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> },<br /> _setItems : function() {</p> <p> this.$items.removeClass('dg-center');</p> <p> this.$currentItm = this.$items.eq( this.current );<br /> this.$leftItm = ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );<br /> this.$rightItm = ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );</p> <p> if( !this.support3d && this.support2d && this.supportTrans ) {</p> <p> this.$items.css( 'z-index', 1 );<br /> this.$currentItm.css( 'z-index', 999 );</p> <p> }</p> <p> // next & previous items<br /> if( this.itemsCount > 3 ) {</p> <p> // next item<br /> this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();<br /> this.$nextItm.css( this._getCoordinates('outright') );</p> <p> // previous item<br /> this.$prevItm = ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();<br /> this.$prevItm.css( this._getCoordinates('outleft') );</p> <p> }</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> },<br /> _loadEvents : function() {</p> <p> var _self = this;</p> <p> this.$navPrev.on( 'click.gallery', function( event ) {</p> <p> if( _self.options.autoplay ) {</p> <p> clearTimeout( _self.slideshow );<br /> _self.options.autoplay = false;</p> <p> }</p> <p> _self._navigate('prev');<br /> return false;</p> <p> });</p> <p> this.$navNext.on( 'click.gallery', function( event ) {</p> <p> if( _self.options.autoplay ) {</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> clearTimeout( _self.slideshow );<br /> _self.options.autoplay = false;</p> <p> }</p> <p> _self._navigate('next');<br /> return false;</p> <p> });</p> <p> this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {</p> <p> _self.$currentItm.addClass('dg-center');<br /> _self.$items.removeClass('dg-transition');<br /> _self.isAnim = false;</p> <p> });</p> <p> },<br /> _getCoordinates : function( position ) {</p> <p> if( this.support3d && this.supportTrans ) {</p> <p> switch( position ) {<br /> case 'outleft':<br /> return {<br /> '-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',<br /> '-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',<br /> '-o-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',<br /> '-ms-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',<br /> 'transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',<br /> 'opacity' : 0,<br /> 'visibility' : 'hidden'<br /> };<br /> break;<br /> case 'outright':<br /> return {<br /> '-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',<br /> '-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',<br /> '-o-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',<br /> '-ms-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',<br /> 'transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',<br /> 'opacity' : 0,<br /> 'visibility' : 'hidden'<br /> };<br /> break;<br /> case 'left':<br /> return {<br /> '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',<br /> '-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',<br /> '-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',<br /> '-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',<br /> 'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> case 'right':<br /> return {<br /> '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> 'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> case 'center':<br /> return {<br /> '-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',<br /> '-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',<br /> '-o-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',<br /> '-ms-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',<br /> 'transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> };</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> }<br /> else if( this.support2d && this.supportTrans ) {</p> <p> switch( position ) {<br /> case 'outleft':<br /> return {<br /> '-webkit-transform' : 'translate(-450px) scale(0.7)',<br /> '-moz-transform' : 'translate(-450px) scale(0.7)',<br /> '-o-transform' : 'translate(-450px) scale(0.7)',<br /> '-ms-transform' : 'translate(-450px) scale(0.7)',<br /> 'transform' : 'translate(-450px) scale(0.7)',<br /> 'opacity' : 0,<br /> 'visibility' : 'hidden'<br /> };<br /> break;<br /> case 'outright':<br /> return {<br /> '-webkit-transform' : 'translate(450px) scale(0.7)',<br /> '-moz-transform' : 'translate(450px) scale(0.7)',<br /> '-o-transform' : 'translate(450px) scale(0.7)',<br /> '-ms-transform' : 'translate(450px) scale(0.7)',<br /> 'transform' : 'translate(450px) scale(0.7)',<br /> 'opacity' : 0,<br /> 'visibility' : 'hidden'<br /> };<br /> break;<br /> case 'left':<br /> return {<br /> '-webkit-transform' : 'translate(-350px) scale(0.8)',<br /> '-moz-transform' : 'translate(-350px) scale(0.8)',<br /> '-o-transform' : 'translate(-350px) scale(0.8)',<br /> '-ms-transform' : 'translate(-350px) scale(0.8)',<br /> 'transform' : 'translate(-350px) scale(0.8)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> case 'right':<br /> return {<br /> '-webkit-transform' : 'translate(350px) scale(0.8)',<br /> '-moz-transform' : 'translate(350px) scale(0.8)',<br /> '-o-transform' : 'translate(350px) scale(0.8)',<br /> '-ms-transform' : 'translate(350px) scale(0.8)',<br /> 'transform' : 'translate(350px) scale(0.8)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> case 'center':<br /> return {<br /> '-webkit-transform' : 'translate(0px) scale(1)',<br /> '-moz-transform' : 'translate(0px) scale(1)',<br /> '-o-transform' : 'translate(0px) scale(1)',<br /> '-ms-transform' : 'translate(0px) scale(1)',<br /> 'transform' : 'translate(0px) scale(1)',<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> };</p> <p> }<br /> else {</p> <p> switch( position ) {<br /> case 'outleft' :<br /> case 'outright' :<br /> case 'left' :<br /> case 'right' :<br /> return {<br /> 'opacity' : 0,<br /> 'visibility' : 'hidden'<br /> };<br /> break;<br /> case 'center' :<br /> return {<br /> 'opacity' : 1,<br /> 'visibility' : 'visible'<br /> };<br /> break;<br /> };</p> <p> }</p> <p> },<br /> _navigate : function( dir ) {</p> <p> if( this.supportTrans && this.isAnim )<br /> return false;</p> <p> this.isAnim = true;</p> <p> switch( dir ) {</p> <p> case 'next' :</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> this.current = this.$rightItm.index();</p> <p> // current item moves left<br /> this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );</p> <p> // right item moves to the center<br /> this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') ); </p> <p> // next item moves to the right<br /> if( this.$nextItm ) {</p> <p> // left item moves out<br /> this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );</p> <p> this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );</p> <p> }<br /> else {</p> <p> // left item moves right<br /> this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );</p> <p> }<br /> break;</p> <p> case 'prev' :</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> this.current = this.$leftItm.index();</p> <p> // current item moves right<br /> this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );</p> <p> // left item moves to the center<br /> this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );</p> <p> // prev item moves to the left<br /> if( this.$prevItm ) {</p> <p> // right item moves out<br /> this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );</p> <p> this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );</p> <p> }<br /> else {</p> <p> // right item moves left<br /> this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );</p> <p> }<br /> break; </p> <p> };</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' class="img-fluid img-thumbnail lazy" /></a></noscript> </div> </div> <p> this._setItems();</p> <p> if( !this.supportTrans )<br /> this.$currentItm.addClass('dg-center');</p> <p> },<br /> _startSlideshow : function() {</p> <p> var _self = this;</p> <p> this.slideshow = setTimeout( function() {</p> <p> _self._navigate( 'next' );</p> <p> if( _self.options.autoplay ) {</p> <p> _self._startSlideshow();</p> <p> }</p> <p> }, this.options.interval );</p> <p> },<br /> destroy : function() {</p> <p> this.$navPrev.off('.gallery');<br /> this.$navNext.off('.gallery');<br /> this.$wrapper.off('.gallery');</p> <p> }<br /> };</p> <p> var logError = function( message ) {<br /> if ( this.console ) {<br /> console.error( message );<br /> }<br /> };</p> <p> $.fn.gallery = function( options ) {</p> <p> if ( typeof options === 'string' ) {</p> <p> var args = Array.prototype.slice.call( arguments, 1 );</p> <p> this.each(function() {</p> <p> var instance = $.data( this, 'gallery' );</p> <p>
০৩. Animation Javascript
<br /> /* Modernizr 2.0.6 (Custom Build) | MIT & BSD<br /> * Build: <a href=http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load rel=nofollow>http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load</a><br /> */<br /> ;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["­","",a,""].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["<a class=bp-suggestions-mention href=https://www.techtunes.io/techtuner/media/ rel=nofollow>@media</a> (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1</p> <p>
০৪. Main CSS file (for design)
<br /> .dg-container{<br /> width: 100%;<br /> height: 450px;<br /> position: relative;<br /> }<br /> .dg-wrapper{<br /> width: 481px;<br /> height: 316px;<br /> margin: 0 auto;<br /> position: relative;<br /> -webkit-transform-style: preserve-3d;<br /> -moz-transform-style: preserve-3d;<br /> -o-transform-style: preserve-3d;<br /> -ms-transform-style: preserve-3d;<br /> transform-style: preserve-3d;<br /> -webkit-perspective: 1000px;<br /> -moz-perspective: 1000px;<br /> -o-perspective: 1000px;<br /> -ms-perspective: 1000px;<br /> perspective: 1000px;<br /> }</p> <p>.dg-wrapper a.dg-transition{<br /> -webkit-transition: all 0.5s ease-in-out;<br /> -moz-transition: all 0.5s ease-in-out;<br /> -o-transition: all 0.5s ease-in-out;<br /> -ms-transition: all 0.5s ease-in-out;<br /> transition: all 0.5s ease-in-out;<br /> }<br /> .dg-wrapper a img{<br /> display: block;<br /> padding: 41px 0px 0px 1px;<br /> }<br /> .dg-wrapper a div{<br /> font-style: italic;<br /> text-align: center;<br /> line-height: 50px;<br /> text-shadow: 1px 1px 1px rgba(255,255,255,0.5);<br /> color: #333;<br /> font-size: 16px;<br /> width: 100%;<br /> bottom: -55px;<br /> display: none;<br /> position: absolute;<br /> }<br /> .dg-wrapper a.dg-center div{<br /> display: block;<br /> }<br /> .dg-container nav{<br /> width: 58px;<br /> position: absolute;<br /> z-index: 1000;<br /> bottom: 40px;<br /> left: 50%;<br /> margin-left: -29px;<br /> }<br /> .dg-container nav span{<br /> text-indent: -9000px;<br /> float: left;<br /> cursor:pointer;<br /> width: 24px;<br /> height: 25px;<br /> opacity: 0.8;<br /> background: transparent url(<a href="http://api.photoshop.com/v1.0/accounts/c1fdf81a91144827ab7f48e817873b7f/assets/834eb537d4524267885a4115d77607b9/renditions/1024.jpg?md=1335224678000" rel=nofollow>http://api.photoshop.com/v1.0/accounts/c1fdf81a91144827ab7f48e817873b7f/assets/834eb537d4524267885a4115d77607b9/renditions/1024.jpg?md=1335224678000</a>) no-repeat top left;<br /> }<br /> .dg-container nav span:hover{<br /> opacity: 1;<br /> }<br /> .dg-container nav span.dg-next{<br /> background-position: top right;<br /> margin-left: 10px;<br /> }</p> <p>

Jquery 3D Post Gallery Live Demo –

আমি এই 3D Post Gallery টা blogger/wordpress version উপযোগী করে তৈরি করেছি, কারণ সাধারণভাবে এই সবগুলো স্কীপ্ট আপনাকে সার্ভারে আপলোড করতে হবে কিন্তু যাদের ব্লগারে সাইট হোস্ট করা আছে তাদের তো এই সুযোগ নাই । তাই আমি নিজে সব স্ক্রিপ্ট হোস্ট করে একটা HTML file এর মধ্যে লিংক করে দিয়েছি । সুতারাং আপনাকে শুধুমাত্র HTML ফাইলটা কপি পেস্ট করতে হবে ।
সোর্স ফাইল (Source File) ডাউনলোড করে জাস্ট blogger এ widget বা template এ কপি পেস্ট করে দিলেই আপনি পেয়ে যাবেন Jquery 3D Post Gallery. এরপর শুধু ওয়েব এবং ইমেজ লিংকগুলো পরিবর্তন করে দিবেন ।

সম্পূর্ণ সোর্স ফাইল ডাউনলোড করুন নীচের লিংক থেকে -