Creating a full screen picture ucoz - UcozBaze All Scripts And Templates
  
Page 1 of 11
UcozBaze All Scripts And Templates » Scripts and Coding » Other » Creating a full screen picture ucoz (Creating a full screen picture ucoz)
Creating a full screen picture ucoz
interoutDate: Monday, 2011-10-03, 9:41 PM | Message # 1
Group: Administrators
Messages: 1021
33





Download ARCHIVE uploade All to Your site ,
Delete all in you Site Page and put this one:
Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>

<script type="text/javascript" src="http://lekus.at.ua/js/lekus/jquery.mousewheel.js"></script>

    <title>Демо</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Fullscreen Gallery with Thumbnail Flip using jQuery" />
    <meta name="keywords" content="jquery, background, full page, fullscreen, image, thumbnail, flip, gallery, slider, slide in, keyboard, key navigation, mousewheel, google font api"/>
    <link rel="shortcut icon" href="http://vk-online.do.am/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
    </head>
    <body>
    <div id="tf_loading" class="tf_loading"></div>
    <div id="tf_bg" class="tf_bg">
    <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
    <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
    <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
    <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
    <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
    <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
    <div class="tf_pattern"></div>
    </div>
    <div id="tf_content_wrapper" class="tf_content_wrapper">
    <div class="tf_content" id="content1" style="display:block;">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content2">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content3">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content4">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content5">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content6">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    </div>

    <div id="tf_thumbs" class="tf_thumbs">
    <span id="tf_zoom" class="tf_zoom"></span>
    <img src="images/thumbs/1.jpg" alt="Thumb1"/>
    </div>

    <div id="tf_next" class="tf_next"></div>
    <div id="tf_prev" class="tf_prev"></div>
       
    <div class="reference">
    <a href="http://webo4ka.ru/" class="last">ALL for webo4ka.ru</a>
    <a href="http://vk-online.do.am/index/izobrazhenija_polina_efremova/0-20" target="_blank">Изображения Полина Ефремова</a>
    <a href="http://vk-online.do.am">by lexus       </a>
    </div>
    <div class="description">
    <span>С помощью кнопок ↑ и ↓ вы сможете переключить фото или наведите на стрелочку мышкой.</span>
    </div>
    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.flip.js"></script>
    <script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
    /*
    the images preload plugin
    */
    (function($) {
    $.fn.preload = function(options) {
    var opts = $.extend({}, $.fn.preload.defaults, options);
    o = $.meta ? $.extend({}, opts, this.data()) : opts;
    var c = this.length,
    l = 0;
    return this.each(function() {
    var $i = $(this);
    $('<img/>').load(function(i){
    ++l;
    if(l == c) o.onComplete();
    }).attr('src',$i.attr('src'));    
    });
    };
    $.fn.preload.defaults = {
    onComplete : function(){return false;}
    };
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(function() {
    var $tf_bg = $('#tf_bg'),
    $tf_bg_images = $tf_bg.find('img'),
    $tf_bg_img = $tf_bg_images.eq(0),
    $tf_thumbs = $('#tf_thumbs'),
    total = $tf_bg_images.length,
    current = 0,
    $tf_content_wrapper = $('#tf_content_wrapper'),
    $tf_next = $('#tf_next'),
    $tf_prev = $('#tf_prev'),
    $tf_loading = $('#tf_loading');
       
    //preload the images    
    $tf_bg_images.preload({
    onComplete : function(){
    $tf_loading.hide();
    init();
    }
    });
       
    //shows the first image and initializes events
    function init(){
    //get dimentions for the image, based on the windows size
    var dim = getImageDim($tf_bg_img);
    //set the returned values and show the image
    $tf_bg_img.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : dim.top
    }).fadeIn();
       
    //resizing the window resizes the $tf_bg_img
    $(window).bind('resize',function(){
    var dim = getImageDim($tf_bg_img);
    $tf_bg_img.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : dim.top
    });
    });
       
    //expand and fit the image to the screen
    $('#tf_zoom').live('click',
    function(){
    if($tf_bg_img.is(':animated'))
    return false;
       
    var $this = $(this);
    if($this.hasClass('tf_zoom')){
    resize($tf_bg_img);
    $this.addClass('tf_fullscreen')
    .removeClass('tf_zoom');
    }
    else{
    var dim = getImageDim($tf_bg_img);
    $tf_bg_img.animate({
    width : dim.width,
    height : dim.height,
    top : dim.top,
    left : dim.left
    },350);
    $this.addClass('tf_zoom')
    .removeClass('tf_fullscreen');    
    }
    }
    );
       
    //click the arrow down, scrolls down
    $tf_next.bind('click',function(){
    if($tf_bg_img.is(':animated'))
    return false;
    scroll('tb');
    });
       
    //click the arrow up, scrolls up
    $tf_prev.bind('click',function(){
    if($tf_bg_img.is(':animated'))
    return false;
    scroll('bt');
    });
       
    //mousewheel events - down / up button trigger the scroll down / up
    $(document).mousewheel(function(e, delta) {
    if($tf_bg_img.is(':animated'))
    return false;
       
    if(delta > 0)
    scroll('bt');
    else
    scroll('tb');
    return false;
    });
       
    //key events - down / up button trigger the scroll down / up
    $(document).keydown(function(e){
    if($tf_bg_img.is(':animated'))
    return false;
       
    switch(e.which){
    case 38:    
    scroll('bt');
    break;    

    case 40:    
    scroll('tb');
    break;
    }
    });
    }
       
    //show next / prev image
    function scroll(dir){
    //if dir is "tb" (top -> bottom) increment current,    
    //else if "bt" decrement it
    current = (dir == 'tb')?current + 1:current - 1;
       
    //we want a circular slideshow,    
    //so we need to check the limits of current
    if(current == total) current = 0;
    else if(current < 0) current = total - 1;
       
    //flip the thumb
    $tf_thumbs.flip({
    direction : dir,
    speed : 400,
    onBefore : function(){
    //the new thumb is set here
    var content = '<span id="tf_zoom" class="tf_zoom"></span>';
    content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
    $tf_thumbs.html(content);
    }
    });

    //we get the next image
    var $tf_bg_img_next = $tf_bg_images.eq(current),
    //its dimentions
    dim = getImageDim($tf_bg_img_next),
    //the top should be one that makes the image out of the viewport
    //the image should be positioned up or down depending on the direction
    top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
       
    //set the returned values and show the next image    
    $tf_bg_img_next.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : top
    }).show();
       
    //now slide it to the viewport
    $tf_bg_img_next.stop().animate({
    top : dim.top
    },1000);
       
    //we want the old image to slide in the same direction, out of the viewport
    var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
    $tf_bg_img.stop().animate({
    top : slideTo
    },1000,function(){
    //hide it
    $(this).hide();
    //the $tf_bg_img is now the shown image
    $tf_bg_img = $tf_bg_img_next;
    //show the description for the new image
    $tf_content_wrapper.children()
    .eq(current)
    .show();
    });
    //hide the current description    
    $tf_content_wrapper.children(':visible')
    .hide()
       
    }
       
    //animate the image to fit in the viewport
    function resize($img){
    var w_w = $(window).width(),
    w_h = $(window).height(),
    i_w = $img.width(),
    i_h = $img.height(),
    r_i = i_h / i_w,
    new_w,new_h;
       
    if(i_w > i_h){
    new_w = w_w;
    new_h = w_w * r_i;
       
    if(new_h > w_h){
    new_h = w_h;
    new_w = w_h / r_i;
    }
    }    
    else{
    new_h = w_w * r_i;
    new_w = w_w;
    }
       
    $img.animate({
    width : new_w + 'px',
    height : new_h + 'px',
    top : '0px',
    left : '0px'
    },350);
    }
       
    //get dimentions of the image,    
    //in order to make it full size and centered
    function getImageDim($img){
    var w_w = $(window).width(),
    w_h = $(window).height(),
    r_w = w_h / w_w,
    i_w = $img.width(),
    i_h = $img.height(),
    r_i = i_h / i_w,
    new_w,new_h,
    new_left,new_top;
       
    if(r_w > r_i){
    new_h = w_h;
    new_w = w_h / r_i;
    }
    else{
    new_h = w_w * r_i;
    new_w = w_w;
    }

    return {
    width : new_w + 'px',
    height : new_h + 'px',
    left : (w_w - new_w) / 2 + 'px',
    top : (w_h - new_h) / 2 + 'px'
    };
    }
    });
    </script>
    </body>
</html>


 
Message





Download ARCHIVE uploade All to Your site ,
Delete all in you Site Page and put this one:
Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>

<script type="text/javascript" src="http://lekus.at.ua/js/lekus/jquery.mousewheel.js"></script>

    <title>Демо</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Fullscreen Gallery with Thumbnail Flip using jQuery" />
    <meta name="keywords" content="jquery, background, full page, fullscreen, image, thumbnail, flip, gallery, slider, slide in, keyboard, key navigation, mousewheel, google font api"/>
    <link rel="shortcut icon" href="http://vk-online.do.am/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
    </head>
    <body>
    <div id="tf_loading" class="tf_loading"></div>
    <div id="tf_bg" class="tf_bg">
    <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
    <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
    <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
    <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
    <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
    <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
    <div class="tf_pattern"></div>
    </div>
    <div id="tf_content_wrapper" class="tf_content_wrapper">
    <div class="tf_content" id="content1" style="display:block;">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content2">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content3">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content4">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content5">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    <div class="tf_content" id="content6">
    <h2>webo4ka.ru</h2>
    <p>здесь будет ваш текст....</p>
    </div>
    </div>

    <div id="tf_thumbs" class="tf_thumbs">
    <span id="tf_zoom" class="tf_zoom"></span>
    <img src="images/thumbs/1.jpg" alt="Thumb1"/>
    </div>

    <div id="tf_next" class="tf_next"></div>
    <div id="tf_prev" class="tf_prev"></div>
       
    <div class="reference">
    <a href="http://webo4ka.ru/" class="last">ALL for webo4ka.ru</a>
    <a href="http://vk-online.do.am/index/izobrazhenija_polina_efremova/0-20" target="_blank">Изображения Полина Ефремова</a>
    <a href="http://vk-online.do.am">by lexus       </a>
    </div>
    <div class="description">
    <span>С помощью кнопок ↑ и ↓ вы сможете переключить фото или наведите на стрелочку мышкой.</span>
    </div>
    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.flip.js"></script>
    <script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
    /*
    the images preload plugin
    */
    (function($) {
    $.fn.preload = function(options) {
    var opts = $.extend({}, $.fn.preload.defaults, options);
    o = $.meta ? $.extend({}, opts, this.data()) : opts;
    var c = this.length,
    l = 0;
    return this.each(function() {
    var $i = $(this);
    $('<img/>').load(function(i){
    ++l;
    if(l == c) o.onComplete();
    }).attr('src',$i.attr('src'));    
    });
    };
    $.fn.preload.defaults = {
    onComplete : function(){return false;}
    };
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(function() {
    var $tf_bg = $('#tf_bg'),
    $tf_bg_images = $tf_bg.find('img'),
    $tf_bg_img = $tf_bg_images.eq(0),
    $tf_thumbs = $('#tf_thumbs'),
    total = $tf_bg_images.length,
    current = 0,
    $tf_content_wrapper = $('#tf_content_wrapper'),
    $tf_next = $('#tf_next'),
    $tf_prev = $('#tf_prev'),
    $tf_loading = $('#tf_loading');
       
    //preload the images    
    $tf_bg_images.preload({
    onComplete : function(){
    $tf_loading.hide();
    init();
    }
    });
       
    //shows the first image and initializes events
    function init(){
    //get dimentions for the image, based on the windows size
    var dim = getImageDim($tf_bg_img);
    //set the returned values and show the image
    $tf_bg_img.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : dim.top
    }).fadeIn();
       
    //resizing the window resizes the $tf_bg_img
    $(window).bind('resize',function(){
    var dim = getImageDim($tf_bg_img);
    $tf_bg_img.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : dim.top
    });
    });
       
    //expand and fit the image to the screen
    $('#tf_zoom').live('click',
    function(){
    if($tf_bg_img.is(':animated'))
    return false;
       
    var $this = $(this);
    if($this.hasClass('tf_zoom')){
    resize($tf_bg_img);
    $this.addClass('tf_fullscreen')
    .removeClass('tf_zoom');
    }
    else{
    var dim = getImageDim($tf_bg_img);
    $tf_bg_img.animate({
    width : dim.width,
    height : dim.height,
    top : dim.top,
    left : dim.left
    },350);
    $this.addClass('tf_zoom')
    .removeClass('tf_fullscreen');    
    }
    }
    );
       
    //click the arrow down, scrolls down
    $tf_next.bind('click',function(){
    if($tf_bg_img.is(':animated'))
    return false;
    scroll('tb');
    });
       
    //click the arrow up, scrolls up
    $tf_prev.bind('click',function(){
    if($tf_bg_img.is(':animated'))
    return false;
    scroll('bt');
    });
       
    //mousewheel events - down / up button trigger the scroll down / up
    $(document).mousewheel(function(e, delta) {
    if($tf_bg_img.is(':animated'))
    return false;
       
    if(delta > 0)
    scroll('bt');
    else
    scroll('tb');
    return false;
    });
       
    //key events - down / up button trigger the scroll down / up
    $(document).keydown(function(e){
    if($tf_bg_img.is(':animated'))
    return false;
       
    switch(e.which){
    case 38:    
    scroll('bt');
    break;    

    case 40:    
    scroll('tb');
    break;
    }
    });
    }
       
    //show next / prev image
    function scroll(dir){
    //if dir is "tb" (top -> bottom) increment current,    
    //else if "bt" decrement it
    current = (dir == 'tb')?current + 1:current - 1;
       
    //we want a circular slideshow,    
    //so we need to check the limits of current
    if(current == total) current = 0;
    else if(current < 0) current = total - 1;
       
    //flip the thumb
    $tf_thumbs.flip({
    direction : dir,
    speed : 400,
    onBefore : function(){
    //the new thumb is set here
    var content = '<span id="tf_zoom" class="tf_zoom"></span>';
    content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
    $tf_thumbs.html(content);
    }
    });

    //we get the next image
    var $tf_bg_img_next = $tf_bg_images.eq(current),
    //its dimentions
    dim = getImageDim($tf_bg_img_next),
    //the top should be one that makes the image out of the viewport
    //the image should be positioned up or down depending on the direction
    top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
       
    //set the returned values and show the next image    
    $tf_bg_img_next.css({
    width : dim.width,
    height : dim.height,
    left : dim.left,
    top : top
    }).show();
       
    //now slide it to the viewport
    $tf_bg_img_next.stop().animate({
    top : dim.top
    },1000);
       
    //we want the old image to slide in the same direction, out of the viewport
    var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
    $tf_bg_img.stop().animate({
    top : slideTo
    },1000,function(){
    //hide it
    $(this).hide();
    //the $tf_bg_img is now the shown image
    $tf_bg_img = $tf_bg_img_next;
    //show the description for the new image
    $tf_content_wrapper.children()
    .eq(current)
    .show();
    });
    //hide the current description    
    $tf_content_wrapper.children(':visible')
    .hide()
       
    }
       
    //animate the image to fit in the viewport
    function resize($img){
    var w_w = $(window).width(),
    w_h = $(window).height(),
    i_w = $img.width(),
    i_h = $img.height(),
    r_i = i_h / i_w,
    new_w,new_h;
       
    if(i_w > i_h){
    new_w = w_w;
    new_h = w_w * r_i;
       
    if(new_h > w_h){
    new_h = w_h;
    new_w = w_h / r_i;
    }
    }    
    else{
    new_h = w_w * r_i;
    new_w = w_w;
    }
       
    $img.animate({
    width : new_w + 'px',
    height : new_h + 'px',
    top : '0px',
    left : '0px'
    },350);
    }
       
    //get dimentions of the image,    
    //in order to make it full size and centered
    function getImageDim($img){
    var w_w = $(window).width(),
    w_h = $(window).height(),
    r_w = w_h / w_w,
    i_w = $img.width(),
    i_h = $img.height(),
    r_i = i_h / i_w,
    new_w,new_h,
    new_left,new_top;
       
    if(r_w > r_i){
    new_h = w_h;
    new_w = w_h / r_i;
    }
    else{
    new_h = w_w * r_i;
    new_w = w_w;
    }

    return {
    width : new_w + 'px',
    height : new_h + 'px',
    left : (w_w - new_w) / 2 + 'px',
    top : (w_h - new_h) / 2 + 'px'
    };
    }
    });
    </script>
    </body>
</html>

Author - interout
Date Added - 2011-10-03 в 9:41 PM
UcozBaze All Scripts And Templates » Scripts and Coding » Other » Creating a full screen picture ucoz (Creating a full screen picture ucoz)
Page 1 of 11
Search:
                                                               
Statistics Forum
New Posts Popular topic Top Forum Users New User

type list Forumo Informatorius (2)
type list Pereiti i kita puslapi forume 1.2.3. Ucoz skriptas (1)
type list The script for the output of a random video from Youtube (0)
type list The script updates the block comment without refreshing the (0)
type list Information about your browser for uCoz (0)
type list Kaip isideti Forum Online/Offline Image Ucoz ? (4)
type list Highlight the code in one click (0)
type list The original form of statistics for uCoz (0)
type list The ban on the entry of certain characters in the Input (0)
type list Clock for site ucoz (0)

type list Skaiciuojam nuo 1 iki 1000 ! (557)
type list Forum SignatureBar (60)
type list Avatars (22)
type list Kaip pakeisti paveiksla mazas? (19)
type list Juokingos Fotkes :) (19)
type list Mini-Chatas islendantis is sono ucoz (15)
type list Mp3-Tau.do.am (13)
type list Шаблон форума для ucoz For-css (12)
type list Ucoz script - favicon (11)
type list Button scrolling up ucoz (10)

interout
GoblinaS
Adi
Esquire
BAtman
WaSHkaZ
Skacikas
meskis
Gytenas
vicka

AnelsoNN
nemanjababin
defaultNick0568
mechoochite
mdcurren
yastreb
lad0s™
Lapuxa
th3kizaka
projektas420


Site design by uCozBaze
uCozBaze © 2011-2016