January 22, 2015

Weebly Tricks #90 - 3D Gallery with CSS3 and JQuery

Posted by Domingo Tambasacan at 1/22/2015



It turns out that I am night shift again, which means I've got enough time for our site. Well, here is a simple "rotating" 3D effects to show your photos. The effects was used to preview website templates in case you're selling. If not with the selling purposes, then use your best photos for an awesome gallery.






FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.53451.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/jquery.gallery.js"></script>
<script type="text/javascript">
$(function() {
$('#dg-container').gallery({
autoplay : false
});
});
</script>

Notes:
Red text - Change with your site address.
Blue text - Change to true if you want an auto play style.


HEADER CODE
Where to place these codes? Click Here!


<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/3dcss3jq.css">
<style>
#content {
width: 1000px !important;
}
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>

Notes:
Red text - Change with your site address.
Blue text - This is optional. The plug in needs atleast 1000px width of your site. This width is applied on the demo page.


BODY CODE
Where to place these codes? Click Here!


<section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq1.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq2.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq3.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
    </div>
    <nav>
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>

Notes:
Red text - This is the link when people click your images.
Green text - This the your image source link.
Violet text - A short image description.
Yellow text - Your text.


CONCLUSION





If you want to add more images and site adjustments, simply use the forum for queries. More options on the code source of course.

This gallery effect is simple and made possible using the 10 Capsulated Tips.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

3 comments:

  1. How do I change the skin that surrounds the image?

    ReplyDelete
  2. Can we all effects from http://tympanus.net/codrops/category/tutorials/
    Please reply.
    if yes then please let me know how didi you do all that.
    I have a little knowledge about CSS,HTML &...

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top