Jak zainstalować ten skrypt?

rych54 · Listopad 24, 2013

Witam! Znalazłem skrypt karuzeli w internecie tylko po pobraniu w paczce są tylko skrypty i nie mam zielonego pojęcia jak zainstalować dosyć fajny skrypt z tej strony:http://darsa.in/sly/ a dokładnie http://darsa.in/sly/examples/horizontal.html przykład Force Centered. Pomoże ktoś?

behemoth · Listopad 24, 2013

A patrzyłeś w źródło strony i próbowałeś postąpić analogicznie?

rych54 · Listopad 24, 2013

Tak ale nie kumam za bardzo bo tyle tam tego jest.

PapaSmerf · Listopad 24, 2013

Dołączasz JS, CSS. Tutaj masz przykład inicjalizacji: http://darsa.in/sly/examples/js/horizontal.js.

rych54 · Listopad 25, 2013

A skąd css?

PapaSmerf · Listopad 25, 2013

Napisać. Posiłkuj się tym, co zobaczysz w przykładach.

rych54 · Listopad 25, 2013

Mam coś takiego: horizontal.js - ten od ciebie ale nie działa.

<script src="js/horizontal.js" type="text/javascript"></script>

<div id="scrollbar">
	<div class="handle"></div>
</div>
<div id="frame">
	<ul class="slidee">
		<li><img src="img/a.jpg"></li> // Item
		<li><img src="img/b.jpg"></li> // Item
		<li><img src="img/c.jpg"></li> // Item
	</ul>
</div>
<div class="controls center">
				<button class="btn prev disabled" disabled=""><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>
			
<style>

/* Frame */
.frame {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame ul li {
	float: left;
	width: 227px;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
.frame ul li.active {
	color: #fff;
	background: #a03232;
}

/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }

/* Effects */
.effects {
	height: 200px;
	line-height: 200px;
	-webkit-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	overflow-y: show;
}
.effects ul {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.effects ul li {
	position: relative;
	margin: 0 -20px;
	-webkit-transform: rotateY(60deg) scale(0.9);
	-ms-transform: rotateY(60deg) scale(0.9);
	transform: rotateY(60deg) scale(0.9);
	-webkit-transition: -webkit-transform 300ms ease-out;
	transition: transform 300ms ease-out;
}
.effects ul li.active {
	z-index: 10;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.effects ul li.active ~ li {
	-webkit-transform: rotateY(-60deg) scale(0.9);
	-ms-transform: rotateY(-60deg) scale(0.9);
	transform: rotateY(-60deg) scale(0.9);
}

</style>

PapaSmerf · Listopad 25, 2013

A dołączyłeś jQuery oraz Sly?

rych54 · Listopad 25, 2013

Cały kod strony:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
	<link rel="stylesheet" media="screen" href="css/horizontal.css" />
	<link rel="stylesheet" media="screen" href="css/style.css" />

		<noscript>
			<link rel="stylesheet" type="text/css" href="css/noscript.css" />
		</noscript>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 <div class="container">
    <nav id="page" class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">AGENCJA OXIMA</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="oferta.html">Oferta</a></li>
	  <li class="active"><a href="hostessy.html">Hostessy</a></li>
	  <li><a href="hosci.html">Hości</a></li>
	  <li><a href="#">Aktualności</a></li>
	  <li><a href="casting.html">Casting</a></li>
	  <li><a href="kontakt.html">Kontakt</a></li>
    </ul>

  </div><!-- /.navbar-collapse -->
</nav>
</div>

                <div id="ei-slider" class="ei-slider">
                    <ul class="ei-slider-large">
                        <li>
                            <img src="img/1.jpg" alt="image01" />
                            <div class="ei-title">
                                <h2>Creative Duet</h2>
                                 <h3>Rebel</h3>
                            </div>
                        </li>
                        <li>
                            <img src="img/2.jpg" alt="image02" />
                            <div class="ei-title">
                                <h2>Friendly</h2>
                                <h3>Devil</h3>
                            </div>
                        </li>
                        <li>
                            <img src="img/3.jpg" alt="image03"/>
                            <div class="ei-title">
								<h2>Life style</h2>
                                <h3>New colection- autumn / winter 2013</h3>
                            </div>
                        </li>
                        <li>
                            <img src="img/4.jpg" alt="image04"/>
                            <div class="ei-title">
                                <h2>Insecure</h2>
                                <h3>Hussler</h3>
                            </div>
                        </li>
                        <li>
                            <img src="img/6.jpg" alt="image06"/>
                            <div class="ei-title">
                                <h2>Passionate</h2>
                                <h3>Seeker</h3>
                            </div>
                        </li>
                        <li>
                            <img src="img/7.jpg" alt="image07"/>
                            <div class="ei-title">
                                <h2>Crazy</h2>
								<h3>Friend</h3>
                            </div>
                        </li>
                    </ul><!-- ei-slider-large -->
                    <ul class="ei-slider-thumbs">
                        <li class="ei-slider-element">Current</li>
                        <li><a href="#">Slide 1</a></li>
                        <li><a href="#">Slide 2</a></li>
                        <li><a href="#">Slide 3</a></li>
                        <li><a href="#">Slide 4</a></li>
                        <li><a href="#">Slide 5</a></li>
                        <li><a href="#">Slide 6</a></li>
                    </ul><!-- ei-slider-thumbs -->
                </div><!-- ei-slider -->




	<div class="container">
			<div class="page-header">
				<h1 class="naglowek">Galeria hostess</h1>
				<p style="border-bottom: 4px solid #dccc99; width: 40%;"></p>
			</div>
				
				
			<div id="scrollbar">
	<div class="handle"></div>
</div>
<div id="frame">
	<ul class="slidee">
		<li>1</li> // Item
		<li>1</li> // Item
		<li>1</li> // Item
	</ul>
</div>
<div class="controls center">
				<button class="btn prev disabled" disabled=""><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>
				
		
	</div>
	
	
		
		

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	<script src="js/lightbox-2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
         <script type="text/javascript">
            $(function() {
                $('#ei-slider').eislideshow({
					animation			: 'center',
					autoplay			: true,
					slideshow_interval	: 3000,
					titlesFactor		: 0
                });
            });
        </script>
			<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
			<script src="js/horizontal.js" type="text/javascript"></script>
			<script src="js/sly.min.js" type="text/javascript"></script>
	<!-- Starting the plugin -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
	  			containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
	 		};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
  
  </body>
</html>

PapaSmerf · Listopad 25, 2013

Najpierw Sly, potem kod z przykładu. Skup się...

rych54 · Listopad 25, 2013

Nic to nie dało, wszystko wyświetla się w pionie

W konsoli nie pokazuję mi klas frame i slidee które są w plik horizontal.css. Nie wiem czemu.

rych54 · Listopad 25, 2013

Działa tylko teraz chciałbym jeszcze zrobić to responsywne tylko nie wiem jak. Generalnie chce osiągnąć taki efekt: http://demo.cosmothemes.com/tripod-colored/gallery/sed-at-ligula-at-ipsum-bibendum-mollis-id/

a kod:

<div class="scrollbar">
				<div class="handle">
					<div class="mousearea"></div>
				</div>
			</div>

			<div class="frame" id="forcecentered">
				<ul class="clearfix">
					<li><img src="img/1a.jpg" class="img-responsive"/></li>
					<li><img src="img/1b.jpg" /></li>
					<li><img src="img/1c.jpg" /></li>
					<li><img src="img/1a.jpg" /></li>
					<li><img src="img/1b.jpg" /></li>
					
				</ul>
			</div>

			<div class="controls center">
				<button class="btn prev"><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>

/* Frame */
.frame {

	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame ul li {
	float: left;

	margin: 0 1px 0 0;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
.frame ul li.active {
	color: #fff;
	background: #a03232;
}

/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }

/* Effects */
.effects {
	height: 200px;
	line-height: 200px;
	-webkit-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	overflow-y: show;
}
.effects ul {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.effects ul li {
	position: relative;
	margin: 0 -20px;
	-webkit-transform: rotateY(60deg) scale(0.9);
	-ms-transform: rotateY(60deg) scale(0.9);
	transform: rotateY(60deg) scale(0.9);
	-webkit-transition: -webkit-transform 300ms ease-out;
	transition: transform 300ms ease-out;
}
.effects ul li.active {
	z-index: 10;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.effects ul li.active ~ li {
	-webkit-transform: rotateY(-60deg) scale(0.9);
	-ms-transform: rotateY(-60deg) scale(0.9);
	transform: rotateY(-60deg) scale(0.9);
}

PapaSmerf · Listopad 25, 2013

No to media-queries zastosować musisz oraz - najlepiej - elastyczne rozmiary elementów.

rych54 · Listopad 25, 2013

a jak to jest zrobione tutaj: http://demo.cosmothemes.com/tripod-colored/gallery/sed-at-ligula-at-ipsum-bibendum-mollis-id/? nie można jakoś tego wyciągnąć bo to ta sama wtyczka

PapaSmerf · Listopad 25, 2013

Pożyczanie cudzego kodu nie jest fair.

Popatrz, zobacz jak jest zrobione i napisz sam.

rych54 · Listopad 25, 2013

Wiem tylko mam spore problemy

PapaSmerf · Listopad 25, 2013

Z czym konkretnie?

rych54 · Listopad 25, 2013

No aby zdjęcia były responywne. Wszystko mi się sypie jak coś zmienie itp.

PapaSmerf · Listopad 25, 2013

Zdjęcia responsywne to bajeczka. Najprostszy przykład to:

img {
    height: auto;
    width: 100%;
}

Pewnie coś mieszasz z elementami nadrzędnymi.

rych54 · Listopad 27, 2013

Używam bootstrapa i classy typu img-responsive od bootstrapa nie pomagają.

Zaloguj się

Jak zainstalować ten skrypt?

Polecane posty

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

behemoth 230

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

PapaSmerf 497

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0