TheÐevil's

Showing posts with label gambar. Show all posts

Saturday, February 9, 2013

Image Bubbles using CSS3 transform and transitions

Posted by Nganuah at 2:21 AM · 0 comments

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<ul class="bubblewrap">
<li><a href="#"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

demo

Wednesday, January 30, 2013

Thumbnail Effect With Zoom And Sliding Captions

Posted by Nganuah at 5:21 AM · 0 comments

DEMO

CSS:

    .thumbnailWrapper { width:600px; margin:0px auto; } /* not important */

    .thumbnailWrapper ul {
    list-style-type: none; /* remove the default style for list items (the circles) */
    margin:0px; /* remove default margin */
    padding:0px; /* remove default padding */
    }
    .thumbnailWrapper ul li {
    float:left; /* important: left float */
    position:relative; /* so we can use top and left positioning */
    overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
    }
    .thumbnailWrapper ul li a img {
    width:200px; /* not important, the pics we use here are too big */
    position:relative; /* so we can use top and left positioning */
    border:none; /* remove the default blue border */
    }
    .caption{
    position:absolute; /* needed for positioning */
    bottom:0px; /* bottom of the list item (container) */
    left:0px; /* start from left of the list item (container) */
    width:100%; /* stretch to the whole width of container */
    display:none; /* hide by default */
    /* styling bellow */
    background:rgba(0,0,0,0.8);
    color:white;
    }
    .caption .captionInside{
    /* just styling */
    padding:10px;
    margin:0px;
    }
    .caption p{
    text-align:center;
    font-size:110%;
    }
    .clear { clear:both; } /* to clear the float after the last item */

SCRIPT:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    <script type="text/javascript" charset="utf-8">
    $(window).load(function(){
    //set and get some variables
    var thumbnail = {
    imgIncrease : 100, /* the image increase in pixels (for zoom) */
    effectDuration : 400, /* the duration of the effect (zoom and caption) */
    /*
    get the width and height of the images. Going to use those
    for 2 things:
    make the list items same size
    get the images back to normal after the zoom
    */
    imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
    imgHeight : $('.thumbnailWrapper ul li').find('img').height()
    };

    //make the list items same size as the images
    $('.thumbnailWrapper ul li').css({
    'width' : thumbnail.imgWidth,
    'height' : thumbnail.imgHeight
    });

    //when mouse over the list item...
    $('.thumbnailWrapper ul li').hover(function(){

    $(this).find('img').stop().animate({

    /* increase the image width for the zoom effect*/
    width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
    /* we need to change the left and top position in order to
    have the zoom effect, so we are moving them to a negative
    position of the half of the imgIncrease */
    left: thumbnail.imgIncrease/2*(-1),
    top: thumbnail.imgIncrease/2*(-1)

    },{

    "duration": thumbnail.effectDuration,
    "queue": false
    });

    //show the caption using slideDown event
    $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

    //when mouse leave...
    }, function(){

    //find the image and animate it...
    $(this).find('img').animate({

    /* get it back to original size (zoom out) */
    width: thumbnail.imgWidth,
    /* get left and top positions back to normal */
    left: 0,
    top: 0

    }, thumbnail.effectDuration);

    //hide the caption using slideUp event
    $(this).find('.caption').slideUp(thumbnail.effectDuration);

    });
    });
    </script>

HTML:

    <!-- start thumbnailWrapper -->
    <div class='thumbnailWrapper'>
    <ul>
    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/1.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CofeeNerd</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>musiKings</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /></a>
    <div class='caption'>
    <p class='captionInside'>The Caribbean Energy Conference 2010</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Coffee</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Quantum</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/6.png' /></a>
    <div class='caption'>
    <p class='captionInside'>Infinite Love</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Fathom</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/9.PNG' /></a>
    <div class='caption'>
    <p class='captionInside'>Mixed Pome</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Golf Lessons Online</p>
    </div></li>
    <div class='clear'></div><!-- clear the float -->
    </ul>
    </div><!-- end spolightWrapper -->

Tuesday, January 29, 2013

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

Posted by Nganuah at 9:06 PM · 0 comments

DEMO

CSS:

    <style type="text/css">
    .section {min-width:100%;max-width:100%;
    _width:100%;}

    .cloudzoom-lens-thick {border:5px solid #eee;width:125px;height:125px;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-moz-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-webkit-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);cursor:crosshair;}

    .cloudzoom-zoom-thick {border:7px solid #fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);}

    .cloudzoom-zoom-inside {cursor:pointer;}

    .image-wrap {border:1px solid #eee;display:inline-block;line-height:0;margin-top:20px;margin-bottom:10px;}

    #fullsize img {border:1px solid #eee;}

    .left-half {
        width:50%;
        float:left;
        padding:0;
        display:inline-block;
    }

    .left-in {
        margin-left:5px;
        margin-right:5px;
    }
    .right-in {
        margin-right:5px;
        margin-left:5px;
    }
    .right-half {
        width:50%;
        float:right;
        padding:0;
        display:inline-block;
    }
    .middle-in {
         margin-left:5px;
         margin-right:5px;
    }

    a.starzoom-gallery  img {
        border:1px solid #ccc;
        margin-right:5px;
        width:70px;
    }

    a.starzoom-gallery  img:hover {
        border:1px solid #f60;
    }


    .starzoom {
        cursor:pointer;
        cursor:-moz-zoom-in;
        cursor:-webkit-zoom-in;
        background-image:url('http://www.starplugins.com/sites/starplugins/images/viewport-bg.png');
    }

    #ipadzoom.starzoom {
        background:none;
    }


    fieldset {
        border:1px solid #ccc;
        border-radius: 5px;
        margin-bottom:20px;
    }


    #addthis-wrap {
        position:absolute;
        top:-41px;
        right:190px;
        width:140px;
        height:32px;
        padding:3px;
    }


    .highlight {
        border-radius:5px;
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        background-color:#f60;
        color:#fff;
        padding:15px 15px 15px 15px;
        font-size:16px;
    }




    /*************** TABS ******************/
               
    /* root element for tabs  */
    ul.tabs {
        list-style:none;
        margin:0 !important;
        padding:0;
        border-bottom:1px solid #666;
        height:30px;
    }

    /* single tab */
    ul.tabs li {
        float:left;
        text-indent:0;
        padding:0;
        margin:0 !important;
        list-style-image:none !important;
    }

    /* link inside the tab. uses a background image */
    ul.tabs a {
        background: url(http://www.starplugins.com/sites/starplugins/images/tabs.png) no-repeat -420px 0;
      
        font-size:11px;
        display:block;
        height: 30px;
        line-height:30px;
        width: 134px;
        text-align:center;
        text-decoration:none;
        color:#333;
        padding:0px;
        margin:0px;
        position:relative;
        top:1px;
    }

    ul.tabs a:active {
        outline:none;
    }

    /* when mouse enters the tab move the background image */
    ul.tabs a:hover {
        background-position: -420px -31px;
        color:#fff;
    }

    /* active tab uses a class name "current". its highlight is also done by moving the background image. */
    ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
        background-position: -420px -62px;
        cursor:default !important;
        color:#000 !important;
    }

    /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


    /* width 1 */
    ul.tabs a.s { background-position: -553px 0; width:81px; }
    ul.tabs a.s:hover { background-position: -553px -31px; }
    ul.tabs a.s.current  { background-position: -553px -62px; }

    /* width 2 */
    ul.tabs a.l { background-position: -248px -0px; width:174px; }
    ul.tabs a.l:hover { background-position: -248px -31px; }
    ul.tabs a.l.current { background-position: -248px -62px; }


    /* width 3 */
    ul.tabs a.xl { background-position: 0 -0px; width:248px; }
    ul.tabs a.xl:hover { background-position: 0 -31px; }
    ul.tabs a.xl.current { background-position: 0 -62px; }


    /* initially all panes are hidden */
    .panes .pane {
        display:none;
    }
    </style>

    <link href="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/starzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.css?v=1" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.css??v=1" type="text/css" media="screen" />

SCRIPT:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) -->
    <script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jquery.mousewheel.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/starzoom.js?v=1"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.js?v=3"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.js?v=20"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.js?v=1"></script>

    <script type="text/javascript">
        $(function(){
            $('#zoom1').bind('click',function(){
                var jetZoom = $(this).data('JetZoom');
                $.fancybox.open(jetZoom.getGalleryList());
                return false;
            })
        })
    </script>

    <script type="text/javascript">
                 $(function(){
                     $('pre').addClass('prettyprint'); // Add pretty print to pre elements.
                     prettyPrint();
                    // setup ul.tabs to work as tabs for each div directly under div.panes
                    $("ul.tabs").tabs("div.panes > div");
                 });
                 StarZoom.quickStart();
                 JetZoom.quickStart();
                 CloudZoom.quickStart();
    </script>

HTML:

<br />
<div class="left-half">
<div class="left-in">
<div style="text-align: center;">
<div style="border: 1px solid #ccc; display: inline-block; line-height: 0;">
<span class="cloudzoom-caption" id="cap1">.</span>
   
            <img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                        &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;,
                        &quot;zoomMatchSize&quot;:true,
                        &quot;tintColor&quot;:&quot;#000&quot;,
                        &quot;tintOpacity&quot;:0.25,
                        &quot;captionPosition&quot;:&quot;bottom&quot;
                        }" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" />
                 <br />
<div class="cloudzoom-caption">
<br /></div>
</div>
<div style="margin-top: 10px;">
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg">   
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" width="64" />
            </a>
          
            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" title="Works great with iPad and other touch-enabled devices" width="64" />
            </a>

            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" title="Regular free updates and new features with technical support" width="64" />
            </a>
        </div>
</div>
</div>
</div>
<br />
<div class="left-in">
<h2>
Gallery Elements</h2>
<br />
<div style="text-align: right;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                     zoomImage: 'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',
                     zoomPosition: 12,
                     zoomSizeMode: 'image',
                     zoomOffsetX: -15" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />

            </div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Lens and Zoom CSS</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg&quot;,
                     &quot;lensClass&quot;:&quot;cloudzoom-lens-thick&quot;,
                     &quot;zoomClass&quot;:&quot;cloudzoom-zoom-thick&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
            </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Single Image Mode</h2>
<br />
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="zoomPosition:12, zoomOffsetX:0, uriEscapeMethod:'encodeURI'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg" width="300" />
        </div>
</div>
</div>
</div>
=========
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Tints</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                         &quot;tintColor&quot;:&quot;#f90&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Inner Zoom</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                         &quot;zoomPosition&quot;:&quot;inside&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" />
                </div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Captions</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                             &quot;captionSource&quot;:&quot;#caption1&quot;,
                             &quot;captionType&quot;:&quot;html&quot;
                             }" id="zoom2" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                    </div>
<div class="cloudzoom-caption" id="caption1">
This is an <span style="color: #ffcc00; font-weight: bold;">HTML</span> type caption. You can include <i>any</i> type of content in here!</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Position</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;#zoom2&quot;,
                             &quot;captionPosition&quot;:&quot;bottom&quot;

                             }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" title="This position was defined by a selector." />
                    </div>
</div>
</div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Modal Pop-up Window (e.g. Fancy Box)</h2>
<br />
<div class="right-in">
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image9.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;inside&quot;
                             }" id="myFancyCloudZoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg" title="The image title will also be passed to Fancy Box" />
                    </div>
</div>
</div>
</div>
</div>
</div>
=========
<br />
<div class="section" style="width: 100%;">
<!-- div class="left-half" -->
    <br />
<div class="middle-in">
<h2>
Cloud Zoom in Tabbed Content</h2>
<br />
<div class="panes">
<div style="width: 100%;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',zoomSizeMode: 'image'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />
                </div>
</div>
<div>
<br />
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" width="150" />
                </div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" width="150" />
                </div>
</div>
<div>
<div style="width: 100%;">
<br /></div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg',
                         zoomPosition: 'inside', zoomFlyOut:false" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
                </div>
</div>
</div>
</div>
</div>
<br />
<div class="section" id="fullsize">
<div class="left-half">
<div class="left-in">
<h2>
Full Size Zoom</h2>
<br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image1.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image2.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image3.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image4.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image5.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image5.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image6.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image7.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image8.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image8.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg&quot;, &quot;zoomFullSize&quot;:true, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image9.jpg" />

            </div>
</div>
</div>

Monday, January 7, 2013

Slideshow Otomatis Blogger dengan TinyCarousel

Posted by Nganuah at 6:19 AM · 0 comments

sebelum kita memulai tutorial nya saya mau minta maaf karna tidak bisa ngasih demo nya.......
agar tidak menunda-nunda tutorial nya kita langsung ke ------

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:
]]></b:skin>
Salin kode di bawah ini, kemudian letakkan di atasnya:

/**
 * Custom TinyCarousel by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
 */

#tinycarousel {
  width:532px; /* Lebar Slideshow */
  height:1%;
  overflow:hidden;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:30px auto;
}

#tinycarousel .viewport {
  height:337px;
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
}

#tinycarousel ul.overview {
  list-style:none !important;
  position:absolute;
  padding:0px 0px !important;
  margin:0px 0px !important;
  width:240px;
  left:0px;
  top:0px;
}

#tinycarousel ul.overview li {
  list-style:none !important;
  float:left;
  margin:5px 0px 5px 5px !important;
  padding:0px 0px !important;
  height:auto !important;
  width:168px; /* Lebar satu unit slide */
  background-color:white;
  color:#666;
  border:1px solid #ccc;
}

#tinycarousel .inner {
  margin:10px;
  height:260px;
  overflow:hidden;
}

#tinycarousel img {
  width:auto !important;
  height:170px !important;
  border:none;
  outline:none;
  padding:0px 0px;
  margin:0px 0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#tinycarousel h6 {
  border-top:1px solid #ddd;
  font:bold 11px/12px Verdana,Arial,Sans-Serif;
  color:#39f;
  margin:9px 0px 5px;
  padding:10px 0px 0px;
  backgorund:transparent;
  overflow:hidden;
}

#tinycarousel h6 a {
  color:#39f;
  text-decoration:none;
  border:none;
}

#tinycarousel p {
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#tinycarousel em {
  font-style:normal;
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#555,#333);
  background-image:-moz-linear-gradient(top,#555,#333);
  background-image:-ms-linear-gradient(top,#555,#333);
  background-image:-o-linear-gradient(top,#555,#333);
  background-image:linear-gradient(top,#555,#333);
  display:block;
  padding:5px 10px;
  margin:0px 0px;
}

#tinycarousel #tinyarrow {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  padding:5px;
  margin:2px 0px 0px;
  overflow:hidden;
}

#tinycarousel #tinyarrow .buttons {
  background-color:#666;
  border:none;
  outline:none;
  display:block;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0px 1px;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

#tinycarousel #tinyarrow .disable {
  display:none;
}

#tinycarousel #tinyarrow .buttons:active {
background-color:#900;
  position:relative;
  top:1px;
}

#tinycarousel #tinyarrow span {
  float:right;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  display:block;
  margin:2px 5px 0px 0px;
}

/*
 * Orientasi Vertikal
 * CSS diatur secara manual pada versi aslinya
 * tapi di sini semuanya sudah cukup teratur
 */
#tinycarousel.vertical {
  width:242px;
}

#tinycarousel.vertical ul.overview li {
  float:none;
  display:block;
  width:230px;
  margin:5px auto 10px !important;
}

/* End Slideshow */

Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('#tinycarousel').tinycarousel({
        start       : 1,
        display     : 1,
        axis        : 'x',
        interval    : false,
        intervaltime: 3000,
        animation   : true,
        duration    : 1000,
        callback    : null
    }); 
});
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.tinycarousel-custom.js' type='text/javascript'></script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting.

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 7,
    numchars_g      = 100,
    showText        = "Menampilkan",
    postText        = "Posting",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://logcyber.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>

Ganti URL http://logcyber.blogspot.com/ dengan alamat blog Anda lalu klik Simpan Template.

Monday, December 31, 2012

Memperbesar Avatar/Foto Profil Komentar di blog

Posted by Nganuah at 9:16 PM · 0 comments

Masuklah ke halaman editor HTML Template blogmu kemudian salin kode ini dan letakkan di atas kode ]]></b:skin>

#comments li.comment div.avatar-image-container {
  max-width:none;
  max-height:none;
  width:100px !important;  /* Lebar kontainer avatar */
  height:100px !important; /* Lebar kontainer avatar */
}

#comments li.comment div.avatar-image-container img {
  max-width:none;
  max-height:none;
  width:100px !important;  /* Lebar avatar */
  height:100px !important; /* Lebar avatar */
}

#comments li.comment div.comment-block {
  margin-left:120px !important; /* Untuk indentasi tubuh komentar agar foto dan paragraf tidak berdesakan */
}

Klik Simpan Template..

Navbar

Search This Blog

Saturday, February 9, 2013

Image Bubbles using CSS3 transform and transitions

Wednesday, January 30, 2013

Thumbnail Effect With Zoom And Sliding Captions

Tuesday, January 29, 2013

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

Monday, January 7, 2013

Slideshow Otomatis Blogger dengan TinyCarousel

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Monday, December 31, 2012

Memperbesar Avatar/Foto Profil Komentar di blog

Musik

Saturday, February 9, 2013

Image Bubbles using CSS3 transform and transitions Image Bubbles using CSS3 transform and transitions

Wednesday, January 30, 2013

Thumbnail Effect With Zoom And Sliding Captions Thumbnail Effect With Zoom And Sliding Captions

Tuesday, January 29, 2013

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

Monday, January 7, 2013

Slideshow Otomatis Blogger dengan TinyCarousel Slideshow Otomatis Blogger dengan TinyCarousel

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Monday, December 31, 2012

Memperbesar Avatar/Foto Profil Komentar di blog Memperbesar Avatar/Foto Profil Komentar di blog

Musik

Image Bubbles using CSS3 transform and transitions

Thumbnail Effect With Zoom And Sliding Captions

Slideshow Otomatis Blogger dengan TinyCarousel

Memperbesar Avatar/Foto Profil Komentar di blog