Automatic Slideshow for Blogger with 3D Gallery

Februari 28, 2012

A letter from Arhan Tubar:
Hello
I like very much the automatic slideshow tutorial and I was wondering if you can help me with something.
I would like to make the slideshow from this link:
http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
...to be automatic like in your tutorials.
Can you help me with this request?
Thank you in advance.

My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p

View Demo

Step 1: Edit Your Template

First go to the Template menu and then click Edit HTML and click Continue/Proceed:

Find this code:

]]></b:skin>

Copy the code below and paste it above ]]></b:skin>:

/*
 * Auto Content 4 3D Gallery by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
 */

.dg-container {
  width:100%;
  height:450px;
  position:relative;
  margin:0 auto;
}

.dg-wrapper {
  width:370px;
  height:300px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}

.dg-wrapper a {
  width:370px;
  height:auto;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  text-decoration:none;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.dg-wrapper a.dg-transition {
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.dg-wrapper a img {
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background-color:white;
  padding:0 0;
  margin:0 0;
  display:block;
}

.dg-wrapper a div {
  font-style:italic;
  text-align:center;
  line-height:50px;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#333;
  font-size:16px;
  width:100%;
  bottom:-55px;
  display:none;
  position:absolute;
}

.dg-wrapper a.dg-center div {
  display:block;
  font:normal normal 14px/1.4 "Times New Roman",Times,Serif;
  font-style:italic;
}

.dg-wrapper div a {text-decoration:none}

.dg-container nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-43px;
  padding:10px 15px;
}

.dg-container nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:.8;
  background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {opacity:1}

.dg-container nav span.dg-next {
  background-position:top right;
  margin-left:10px;
}

/* End 3D Gallery */

Then find this code:

</head>

Copy the code below and paste it above:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/modernizr.custom.53451.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.gallery.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
    $('#dg-container').gallery({autoplay:false});
});
</script>

Save your template.

The underlined code is JQuery. If your template already have a JQuery, remove the underlined code! We just need one forever.

Step 2: Put the Slideshow

Go to the Layout menu, then add a new HTML/JavaScript page element that placed above the posts:

Copy the code below and paste it on the form:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = false,
    slidebyLabels   = false,
    slideLabelName  = "Your Specific Post Label",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Comments",
    numposts_g      = 4,
    home_page       = "http://your_blog.blogspot.com";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent43DGallery.js"></script>

Replace the URL http://your_blog.blogspot.com with your blog URL.

Configuring the Slideshow

We have to set two opstions: JSON and JQuery .gallery()

JSON Configuration - Auto Content Slider
Option	Keterangan
showPostDate_g	If `true`, the post date will appear. If `false`, the post date will not appear.
slideOpenNewTab	If `true`, every link will automatically open in new tab/new window.
idMode	If `true`, the post date format will turn into Indonesian. If `false`, the post date format will turn into English.
slidebyLabels	Change to `true` if you want to sort the posts by a specific label. Then, set the name of your specific label to the `slideLabelName`.
slideLabelName	Used to determine the specific label names after changing the `slidebyLabels` value to `true`.
pBlank	A "no image" image.
text	Used to determine the comments label (e.g: 7 Comments).
numposts_g	Used to set the number of slides.
home_page	Your blog URL.

3D Gallery Configuration

Just two options: true or false. If true, the slideshow will move automatically, if false, the slideshow will move by it's navigation:

$(window).bind("load", function() {
    $('#dg-container').gallery({
        autoplay:false // true or false
    });
});

Few suggestions: This slideshow is only use CSS3 Transition for the animation machine. This fact will be very closely related to the browser support (although we have used the Modernizr script so we will get a very nice fallback slideshow for the browser that does not support). If you are interested, I'll post back a better similar slideshow that support for all browsers. This is called ImageFlow 1.3.0.
Just wait :)

Edit: Here it is!

Cari Blog Ini

Web Development Blog Shannenpio