ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    ' editor. HTML*Store :}

    ลำดับตอนที่ #3 : ' the theme | monochrome story .

    • อัปเดตล่าสุด 3 ม.ค. 54


     
     

    monochrome story
    theme from 'Ayumi Kasai Art book
    best with


    :D in this theme


    >> ธีมนี้มีโค้ด jquery 
    >> ธีมนี้มีหน้าต่างป็อปอัพ ( มันเรียกงี้ป่าวหว่า )
    >> ถ้าจะนำไปใช้ ห้ามลบเครดิต 

    :D take the code


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

    $(document).ready(function() {
     //

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging  and Slider Function
    rotate = function(){
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a") Class('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 1000 );

    };

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
            $active = $('.paging a.active').next(); //Move to the next paging
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 1000000); //Timer speed in milliseconds (7 seconds)
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });

    //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });

    });

    </script>   <script>

    $(document).ready(function() {
     //

    //When you click on a link with class of poplight and the href starts with a #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

        //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

        return false;
    });

    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close') ();  //fade them both out
        });
        return false;
    });


    });

    </script> <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script>
    $(document).ready(function() {

        $("ul.gallery li").hover(function() { //On hover...

            var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

            //Set a background image(thumbOver) on the <a> tag - Set position to bottom
            $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

            //Animate the image to 0 opacity (fade it out)
            $(this).find("span").stop().fadeTo('normal', 0 , function() {
                $(this).hide() //Hide the image after fade
            });
        } , function() { //on hover out...
            //Fade the image to full opacity
            $(this).find("span").stop().fadeTo('normal', 1).show();
        });

    });</script> <style type="text/css">

    #navbar-iframe { display: none; }

    a { font: Normal 10px Tahoma; color: #333; text-transform: Lowercase; text-decoration: none; border:none; }
    a:hover { font: Normal 10px Tahoma; color: #fff; letter-spacing: 1px; text-transform: Uppercase; text-decoration: none; }
    a:active { outline: none; }

    .h1 { font: Bold 15px Tahoma; color: #aaa; letter-spacing: -1px; text-transform: lowercase; padding: 5px; }
    .h2 { font: Normal 10px Tahoma; color: #333; padding: 5px; }

    .date {
        font: Bold 20px Tahoma;
        color: #000000;
        letter-spacing: -2px;
        text-transform: Uppercase;
        padding: 5px;
    }
    .blogtext { font: Normal 11px Tahoma; color: #333; padding-left: 5px; }
    .title {
        font: Normal 10px Tahoma;
        letter-spacing : 2px;
        color: #333;
        text-transform: Uppercase;
        padding-left: 5px;
    }

    blockquote { font: Normal 11px Tahoma; background-color: #eee; color: #444; padding: 5px; }

    body {
        background-color: #FFFFFF;
    }

    .main_view {
    position: absolute;
    top: 50px; left: 200px;
    overflow: hidden;

    }

    .window {
    height:500px;
    width: 400px;
    overflow: hidden;
    position: relative;
    background-color: #fff;

    }
    .hi8 {
        font-family: georgia;
        font-size: 32px;
        font-style: italic;
        text-transform: lowercase;
        color: #000000;
        line-height: normal;
        text-decoration: blink;
        letter-spacing: 3px;
    }

    .image_reel {
    position: absolute;
    top: 0; left: 0;
    color: #fff;
    }

    .image_reel img { float: left; color:#fff; background-color: #fff; outline:none; }

    .paging {
    position: absolute;
    top: 350px; left: 830px; margin-left: -230px;
    width: 150px; height:37px;
    ;
    text-align: center;
    line-height: 40px;
    display: none;
    }

    .paging a {
    padding: 5px;
    text-decoration: none;
    color: #CCCCCC;
    }

    .paging a.active {
    font-weight: bold;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    -webkit-box-shadow: 0px 0px 20px #ddd;
    -moz-box-shadow: 0px 0px 20px #ddd;
    box-shadow: 0px 0px 20px #ddd;
    outline: none;
    }

    .paging a:hover { font-weight:bolder;}

    #fade {
    display: none;
    background: #eee;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    ;
    }
     
    .popup_block{
    display: none;
    background: #fff;
    padding: 10px;
    border: 10px solid #fff;
    float: left;
    position: fixed;
    height: 300px;
    top: 50%; left: 50%;
    overflow: auto; overflow-x: hidden;
    ;
    /*--CSS3 Box Shadows--*/
    -webkit-box-shadow: 0px 0px 20px #888;
    -moz-box-shadow: 0px 0px 20px #888;
    box-shadow: 0px 0px 20px #888;
    /*--CSS3 Rounded Corners--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
     
    img.btn_close {
    float: right;
    margin: -25px -25px 0 0;
    }
     
    /*--Making IE6 Understand Fixed Positioning--*/
     
    *html #fade {
    position: absolute;
    }
     
    *html .popup_block {
    position: absolute;
    }
    ul.gallery {
        width: 708px; /*--Adjust width according to your scenario--*/
        list-style: none;
        margin: 0; padding: 0;
    }
    ul.gallery li {
        float: left;
        margin: 10px; padding: 0;
        text-align: center;
        border: 1px solid #ccc;
        -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
    }
    ul.gallery li a.thumb {
        width: 100px; /*--Width of image--*/
        height: 100px; /*--Height of image--*/
        padding: 0px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }
    ul.gallery li span { /*--Used to crop image--*/
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: block;
    }
    ul.gallery li a.thumb:hover {
        background: #333; /*--Hover effect for browser with js turned off--*/
    }
    ul.gallery li h2 {
        font-size: 1em;
        font-weight: normal;
        text-transform: uppercase;
        margin: 0; padding: 10px;
        background: #f0f0f0;
        border-top: 1px solid #fff; /*--Subtle bevel effect--*/
    }
    ul.gallery li a {text-decoration: none; color: #777; display: block;}
    </style>
    <div style="position: fixed; top: 0px; left: 0px;"><embed width="25" height="25" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/RXK_UKTCRaY?fs=1&amp;autoplay=1&amp;loop=1&amp;color1=0xFFFFFF&amp;color2=0xFFFFFF"></embed></div>
    <div class="main_view">
    <div class="window">
    <div class="image_reel">
    <table width="2400" cellspacing="3" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td width="400" valign="top"><img alt="" src="http://img269.imageshack.us/img269/2752/tengainopashluna1coveri.jpg" />&#160;</td>
                <td width="400" valign="top"><img alt="" src="http://img815.imageshack.us/img815/5606/94980404.jpg" /></td>
                <td width="400" valign="top"><img alt="" src="http://img259.imageshack.us/img259/383/222827.jpg" /></td>
                <td width="400" valign="top"><img alt="" src="http://img193.imageshack.us/img193/8757/259n0.jpg" /></td>
                <td width="400" valign="top"><img alt="" src="http://img19.imageshack.us/img19/103/59990460.jpg" /></td>
                <td width="400" valign="top"><img alt="" src="http://img269.imageshack.us/img269/577/14885714051477266472210.jpg" /></td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </div>
    <div class="paging"><a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a> <a rel="4" href="#">4</a> <a rel="5" href="#">5</a> <a rel="6" href="#">6</a></div>
    <div style="position: absolute; width: 400px; top: 280px; left: 600px;"><a class="poplight" title="Click For Blog Entries" style="outline: medium none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); text-transform: uppercase; font-family: georgia; font-size: 30px;" rel="entries" href="#?w=500">Monochrome story</a>
    <div class="title">welcome to my iD. BEAMBEAM!</div>
    <div class="popup_block" id="entries"><center> </center>  <blogger>
    <ul class="gallery">
        <li><a class="thumb" href="http://my.dek-d.com/beamboom/friend/request_friend.php  "><span><img alt="" src="http://img204.imageshack.us/img204/577/14885714051477266472210.jpg" /></span></a>
        <h2><a href="#">the summit</a></h2>
        </li>
    </ul>
    <ul class="gallery">
        <li><a class="thumb" href="http://my.dek-d.com/beamboom/sendsecret.php"><span><img alt="" src="http://img706.imageshack.us/img706/956/37097220.jpg" /></span></a>
        <h2><a href="#">trinity blood</a></h2>
        </li>
    </ul>
    <ul class="gallery">
        <li><a class="thumb" href="http://my.dek-d.com/beamboom/qmsg/"><span><img alt="" src="http://img408.imageshack.us/img408/9707/10102702.jpg" /></span></a>
        <h2><a href="#">RG Veda</a></h2>
        </li>
    </ul>
    <ul class="gallery">
        <li><a class="thumb" href="http://my.dek-d.com/beamboom/control/"><span><img alt="" src="http://img28.imageshack.us/img28/2183/028pv.jpg" /></span></a>
        <h2><a href="#">Kuroshitsuji</a></h2>
        </li>
    </ul>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <center>
    <div class="date">The art not be have colors.</div>
    <div class="title">i adore art . i crazy manga . i love monochrome</div>
    </center><br />

    <div style="border-bottom: 1px dashed rgb(204, 204, 204); padding: 5px;"></div>
    <div class="blogtext"></div>
    </blogger></div>
    </div>
           


    :D original theme

     

    thx ;; noturcupoftea


    http://img805.imageshack.us/img805/3069/80726029.gif
    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×