Forum'da ara:
Ara


Yazar Mesaj
Mesaj17.08.2010, 08:31 (UTC)    
Mesaj konusu: Bs de ilk defa Hem Slider Hem Portfolio

öncelikle önizleme için Arrow http://dersiman.tr.gg



tasarımın üstüne
Kod:
<link rel="stylesheet" href="http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/css/screen.css" type="text/css" media="screen, projection" />    <!-- PrettyPhoto -->
<link type="text/css" href="http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/css/prettyPhoto.css" rel="stylesheet" />        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.0.1'></script>     <script type='text/javascript' src='http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/js/screen.js?ver=3.0.1'></script>  <script type='text/javascript' src='http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/js/jquery.prettyPhoto.js?ver=3.0.1'></script> <script type='text/javascript' src='http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/js/jquery.nivo.slider.js?ver=3.0.1'></script>
<link rel="stylesheet" id="skin" type="text/css" media="screen, projection" href="http://www.unispheredesign.com/demo/breeze/wp-content/themes/breeze/css/skins/light/blue.css" />   



simdi gelelim eklentilere eklentileri istediğiniz sayfaya ekleyebilirsiniz



büyük boy slider


Kod:
<div id="content" class="full-width-page">
<div class="title">Slider Styles</div>
<div class="slider slider-big" id="slider-640493658"><a href="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_1.jpg" title="Image 1" rel="lightbox[640493658]"><img src="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_1.jpg" alt="Image 1" title="Image 1" /></a>    <a href="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_2.jpg" title="Image 2" rel="lightbox[640493658]"><img src="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_2.jpg" alt="Image 2" title="Image 2" /></a>    <a href="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_3.jpg" title="Image 3" rel="lightbox[640493658]"><img src="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/900x300_3.jpg" alt="Image 3" title="Image 3" /></a></div>
<script>
   jQuery(window).load(function() {
      jQuery('#slider-640493658').nivoSlider({
         effect:'random',
         slices:15,
         animSpeed:500,
         pauseTime:4000,
         startSlide:0, //Set starting Slide (0 index)
         directionNav:false, //Next & Prev
         directionNavHide:true, //Only show on hover
         controlNav:true, //1,2,3...
         controlNavThumbs:false, //Use thumbnails for Control Nav
         controlNavThumbsFromRel:false, //Use image rel for thumbs
         controlNavThumbsSearch: '.jpg', //Replace this with...
         controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
         keyboardNav:true, //Use left & right arrows
         pauseOnHover:true, //Stop animation while hovering
         manualAdvance:false, //Force manual transitions
         captionOpacity:1, //Universal caption opacity
         beforeChange: function(){},
         afterChange: function(){},
         slideshowEnd: function(){} //Triggers after all slides have been shown
      });
   });
</script>


orta boy slider

Kod:
<div class="two-third">
<h3>Medium Slider</h3>
<div class="slider slider-medium" id="slider-2062965030"><a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/portfolio2_thumb_1.jpg" alt="" title="Image 1" /></a><br />
<a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/portfolio2_thumb_2.jpg" alt="" title="Image 2" /></a><br />
<a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/portfolio2_thumb_3.jpg" alt="" title="Image 3" /></a></div>
<script>
   jQuery(window).load(function() {
      jQuery('#slider-2062965030 br').remove();
      jQuery('#slider-2062965030').nivoSlider({
         effect:'random',
         slices:15,
         animSpeed:500,
         pauseTime:4000,
         startSlide:0, //Set starting Slide (0 index)
         directionNav:false, //Next & Prev
         directionNavHide:true, //Only show on hover
         controlNav:true, //1,2,3...
         controlNavThumbs:false, //Use thumbnails for Control Nav
         controlNavThumbsFromRel:false, //Use image rel for thumbs
         controlNavThumbsSearch: '.jpg', //Replace this with...
         controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
         keyboardNav:true, //Use left & right arrows
         pauseOnHover:true, //Stop animation while hovering
         manualAdvance:false, //Force manual transitions
         captionOpacity:1, //Universal caption opacity
         beforeChange: function(){},
         afterChange: function(){},
         slideshowEnd: function(){} //Triggers after all slides have been shown
      });
   });
</script></div>


kücük boy slider


Kod:
<div class="one-third last">
<h3>Small Slider</h3>
<div class="slider slider-small" id="slider-593053041"><a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/post_thumb_1.jpg" alt="" title="Image 1" /></a><br />
<a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/post_thumb_2.jpg" alt="" title="Image 2" /></a><br />
<a href="#"><img src="http://www.unispheredesign.com/demo/breeze_html/images/assets/post_thumb_3.jpg" alt="" title="Image 3" /></a></div>
<script>
   jQuery(window).load(function() {
      jQuery('#slider-593053041 br').remove();
      jQuery('#slider-593053041').nivoSlider({
         effect:'random',
         slices:8,
         animSpeed:500,
         pauseTime:4000,
         startSlide:0, //Set starting Slide (0 index)
         directionNav:false, //Next & Prev
         directionNavHide:true, //Only show on hover
         controlNav:true, //1,2,3...
         controlNavThumbs:false, //Use thumbnails for Control Nav
         controlNavThumbsFromRel:false, //Use image rel for thumbs
         controlNavThumbsSearch: '.jpg', //Replace this with...
         controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
         keyboardNav:true, //Use left & right arrows
         pauseOnHover:true, //Stop animation while hovering
         manualAdvance:false, //Force manual transitions
         captionOpacity:1, //Universal caption opacity
         beforeChange: function(){},
         afterChange: function(){},
         slideshowEnd: function(){} //Triggers after all slides have been shown
      });
   });
</script></div>
</div>


geldik portfolio koduna

Kod:
<ul class="portfolio-3-columns-list clearfix">
                                   <li class="portfolio-item">
                                                   <a href="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/portfolio1.jpg" title="Detail with big images" rel="lightbox[portfolio]">
                                                <img title="Detail with big images" alt="Detail with big images" src="http://www.unispheredesign.com/demo/breeze_html/images/assets/portfolio_thumb_1.jpg" class="rounded-top" />                        </a>                           
                  <div class="label-container">
                     <span class="label">Detail with big images</span>
                     <a href="http://www.unispheredesign.com/demo/breeze/?portfolio=detail-with-big-images" class="read-more">view project &raquo;</a>
                  </div>

                    </li>
                                        <li class="portfolio-item">
                                                   <a href="http://www.unispheredesign.com/demo/breeze/wp-content/uploads/2010/08/portfolio2.jpg" title="Detail with slider" rel="lightbox[portfolio]">
                                                <img title="Detail with slider" alt="Detail with slider" src="http://www.unispheredesign.com/demo/breeze_html/images/assets/portfolio_thumb_2.jpg" class="rounded-top" />                        </a>                           
                  <div class="label-container">
                     <span class="label">Detail with slider</span>
                     <a href="http://www.unispheredesign.com/demo/breeze/?portfolio=detail-with-slider" class="read-more">view project &raquo;</a>
                  </div>

                    </li>
                                       
                                </ul>
Mesaj17.08.2010, 08:53 (UTC)    
Mesaj konusu:

Çok güzel sliderler..Emeğine sağlık.. Razz
Mesaj17.08.2010, 08:57 (UTC)    
Mesaj konusu:

Tesekkür ederim dostum
Mesaj17.08.2010, 09:05 (UTC)    
Mesaj konusu:

süper bir extra menü



js dosyalarındaki resimleri değiştirebilirsiniz

kodu tasarımın en üstüne ekleyin

Kod:
 <link rel="stylesheet" href="http://tympanus.net/Tutorials/FixedNavigationTutorial2/css/style.css" type="text/css" charset="utf-8"/>
   
<script type="text/javascript" src="http://tympanus.net/Tutorials/FixedNavigationTutorial2/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>


 <ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
            <li class="photos"><a href=""><span>Photos</span></a></li>
            <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>

            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href=""><span>Contact</span></a></li>
        </ul>

Mesaj17.08.2010, 09:26 (UTC)    
Mesaj konusu:

extra bi menü daha


tasarımın en üstüne / js dosyalarındaki resimleri değiştirebilirsiniz.
Kod:

        <link rel="stylesheet" href="http://tympanus.net/Tutorials/FancyAppleStyleNavigation/css/style.css" type="text/css" charset="utf-8"/>
    </head>

    <body>
        <div class="title"></div>
        <div class="navigation">
            <ul class="menu" id="menu">
                <li><span class="ipod"></span><a href="" class="first">Players</a></li>
                <li><span class="video_camera"></span><a href="">Cameras</a></li>

                <li><span class="television"></span><a href="">TVs</a></li>
                <li><span class="monitor"></span><a href="">Screens</a></li>
                <li><span class="toolbox"></span><a href="">Tools</a></li>
                <li><span class="telephone"></span><a href="">Phones</a></li>
                <li><span class="print"></span><a href="" class="last">Printers</a></li>
            </ul>

        </div>
        <div class="info">
            <a class="back" href="http://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation"></a>
        </div>
       

        <script type="text/javascript" src="http://tympanus.net/Tutorials/FancyAppleStyleNavigation/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
        </script>

    </body>
</html>
Mesaj17.08.2010, 12:36 (UTC)    
Mesaj konusu:

sorun olursa yazabilirsiniz
Mesaj17.08.2010, 17:53 (UTC)    
Mesaj konusu:

İlk Menü Süper Çoook SAğol Birde Tam Ortada Dursaymış
Mesaj17.08.2010, 17:59 (UTC)    
Mesaj konusu:

hepsi çok güzel paylaşımın için saol
______________
css tasarım,giriş paneli gibi istekleriniz için bana ulaşın
skype:semihseker26 veya profilime mesaj atmanız yeterlidir...

TEK ŞARTIM TELİF HAKLARINI ÇİĞNEMEYEN İSTEKLER LÜTFEN TELİF HAKKINI İHLAL EDEN İSTEKLER YOLLAMAYIN.
YENİDEN DÖNSEK Mİ ACABA ?

skype sohbete beklerim arkadaşlar lütfen tüm b-s arkadaşları bekliyorum

https://join.skype.com/cv9oREfyFrRW
Mesaj18.08.2010, 07:00 (UTC)    
Mesaj konusu:

burdaki sayıları değiştirebilirsin olmassa js dosyalarına bak

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
Mesaj18.08.2010, 12:41 (UTC)    
Mesaj konusu:

teşekkürler
Mesaj18.08.2010, 16:28 (UTC)    
Mesaj konusu:

rica
Mesaj18.08.2010, 19:21 (UTC)    
Mesaj konusu:

Konu Süper Eline Sağlık....
Mesaj19.08.2010, 07:28 (UTC)    
Mesaj konusu:

tesekkür ederim
Mesaj19.08.2010, 10:52 (UTC)    
Mesaj konusu:

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio Image Rotator by Soh Tanaka</title>

<style type="text/css">
body {
   
   margin: 0; padding: 0;
   font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
   width: 790px;
   padding: 0;
   margin: 0 auto;
}
.folio_block {
   position: absolute;
   left: 50%; top: 50%;
   margin: -150px 0 0 -395px;
}


/*--Main Container--*/
.main_view {
   float: left;
   position: relative;
}
/*--Window/Masking Styles--*/
.window {
   height:286px;   width: 790px;
   overflow: hidden; /*--Hides anything outside of the set width/height--*/
   position: relative;
}
.image_reel {
   position: absolute;
   top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
   position: absolute;
   bottom: 40px; right: -7px;
   width: 178px; height:47px;
   z-index: 100; /*--Assures the paging stays on the top layer--*/
   text-align: center;
   line-height: 40px;
   background: url() no-repeat;
   display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
}
.paging a.active {
   font-weight: bold;
   background: #920000;
   border: 1px solid #610000;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>


</head>

<body>
<div class="container">
   
    <div class="folio_block">
       
        <div class="main_view">

            <div class="window">   
                <div class="image_reel">
                    <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_1.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_2.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_3.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a>
                </div>
            </div>
            <div class="paging">

                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
            </div>
        </div>
   

    </div>   

</div>


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

$(document).ready(function() {

   //Set Default State of each portfolio piece
   $(".paging").show();
   $(".paging a:first").addClass("active");
      
   //Get size of images, how many 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 + 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").removeClass('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
      }, 500 );
      
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){      
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $('.paging a.active').next();
         if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
      }, 7000); //Timer speed in milliseconds (3 seconds)
   };
   
   rotateSwitch(); //Run function on launch
   
   //On Hover
   $(".image_reel a").hover(function() {
      clearInterval(play); //Stop the rotation
   }, function() {
      rotateSwitch(); //Resume rotation
   });   
   
   //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
      return false; //Prevent browser jump to link anchor
   });   
   
});
</script>
Mesaj19.08.2010, 10:57 (UTC)    
Mesaj konusu:

Eline Sağlık Hepsi Çok Güzel Olmuş
______________
Bir Kadın Erkeğin Gölgesinde Yaşayamayacak Kadar Akıllı, Ama o Gölgede Dinlenmeyi Bilecek Kadar Duygulu Olmalı...
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu