Wątek przeniesiony 2015-11-29 13:35 z Java przez bogdans.
Witam,
mam slajder w którym są ustawione wymiary na sztywno 1280/465.Niestety z tego wzgledu mi się nie skaluje.Wpadlem na pomysl aby ustawić szerokość slajdera tak
slajderSzerokosc = $("#wrapper").width()< $(window).width();
(to mi działa)
a slajderwysokosc chce podzielić( slajderSzerokosc/2.5 lub $(window).width();/2.5 )
Jak to zrobić? nie umiem napisać funkcji.Swoją przygode z Jquery dopiero zaczynam..
Chce żeby mi się skalował przy zmniejszaniu ekranu.
Pozdrawiam
A nie możesz tego w css zrobić? Określanie wyglądu / wymiarów w js to zły pomysł.
Właśnie muszę to w taki sposób zrobić żeby mi się nie rozleciał.Mógłbym to jeszcze w taki sposób chyba zrobić ale nie wiem jak to zaprogramować.
$(window).resize(function(){
if($("#wrapper").width() <=320 ){}
});
Jeśli robisz takie cuda to znaczy, że coś jest tu mocno nie tak. Użyj sobie jakiegoś responsywnego slidera, np.
http://bxslider.com/
html
<div id="wrapper"><div class="slajder">
<div class="maska">
<ul class="slajdy">
<li> <a href="https://www.facebook.com/">
<img src="images/foto.jpg" alt="">
</a>
</li>
<li>
<img src="images/daleko.jpg" alt="">
</li>
<li>
<img src="images/oczy.jpg" alt="">
</li>
<li>
<img src="images/skupienie.jpg" alt="">
</li>
<li>
<img src="images/prawy.jpg" alt="">
</li>
<li>
<img src="images/kociaki.jpg" alt="">
</li>
</ul>
<span class="control poprzedni"></span>
<span class="control nastepny"></span>
</div><!-- /mask -->
<ul class="menu"></ul>
</div><!-- /slajder -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
<!--przewijanie-->
<script src="js/przewijanie.js"></script>
<!-- animacje wow-->
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<!-- Efekty -->
<!--<ul><li class="haslo1"><a href="file:///C:/Users/Marcinello%20ciepluch/Desktop/PROJEKT/index.html">Adipiscing elit</a></li>
<li class="haslo2"><a href="file:///C:/Users/Marcinello%20ciepluch/Desktop/PROJEKT/index.html">Adipiscing elit</a></li> -->
</div>
css
#wrapper{max-width: 1280px;background: red;
margin: 0 auto;}
.slajder {
margin: 0 auto;
}
/* Maska slide'ów */
.maska {
position: relative;
overflow: hidden;
}
/* Wnętrze slide'ów */
ul.slajdy {
list-style: none;
position: relative;
top: 0px;
left: 0px;
padding: 0;
margin: 0;
text-decoration:none;
}
ul.slajdy li {
float: left;
text-align: center;
text-decoration:none;
}
ul.slajdy li img {
width: 100%;
text-decoration:none;
}
/* Menu (kółka) */
ul.menu {
text-align: center;
padding: 0;
position: relative;
margin-top:-40px;
}
ul.menu li {
border-radius: 10px;
height: 20px;
width: 20px;
display: inline-block;
margin: 0 5px;
cursor: pointer;
background-color: silver;
}
ul.menu li.aktywny {
background-color: black;
color: #000;
}
/* Strzałki < > */
.control {
position: absolute;
background-color: silver;
padding: 10px;
top: 40%;
z-index: 1;
cursor: pointer;
font-size: 30px;
font-weight: bold;
opacity: 0;
transition: all .4s;
}
.control:hover {
background-color: gray;
}
.maska:hover .control {
opacity: .8;
}
.poprzedni {
left: 0;
}
.poprzedni:before {
content: '<';
}
.nastepny {
right: 0;
}
.nastepny:after {
content: '>';
}
java
$(function(){
// Podstawowe zmienne
var $slajder = $( ".slajder" ),
$slajdy = $slajder.find( "ul.slajdy" ),
opoznienieSek = 3,
slajderSzerokoscPx = 1280;
slajderWysokoscPx = 465;
// Ustawienie parametrów "na sztywno"
// $slajder.find( "img" ).height( slajderWysokoscPx );
$slajder.width( slajderSzerokoscPx );
$slajder.find( ".maska" ).height( slajderWysokoscPx );
$slajdy.find( "li" ).width( slajderSzerokoscPx );
// Strowanie dynamicznego menu z ilością kropek równą ilości slajdów
$slajdy.find( "li" ).each(function(){
$slajder.find( "ul.menu" ).append( "<li></li>" );
});
// Zmienna menu działa poprawnie dopiero po wygenerowaniu menu
// nie przenoś jej powyżej pętli .each
var $menu = $slajder.find( "ul.menu li" );
var ostatniIndex = $menu.length - 1;
// Ustawienie szerokości wszystkich slajdów
$slajdy.css( "width" , slajderSzerokoscPx * $menu.length );
// Przypisanie aktywnej klasy pierwszej kropce w menu
$menu.first().addClass( "aktywny" );
// Przewijanie w momencie kliknięcia na nieaktywny element menu
$menu.click(function(){
if ( !$( this ).hasClass( "aktywny" ) )
{
target = $( this ).index();
przewijanieSlajdera( target );
}
});
// Nawigacja strzałkami
$slajder.find( ".poprzedni" ).click(function(){
target = $menu.siblings( ".aktywny" ).index();
target == 0 ? target = ostatniIndex : target -= 1;
przewijanieSlajdera( target );
});
$slajder.find( ".nastepny" ).click(function(){
target = $menu.siblings( ".aktywny" ).index();
target == ostatniIndex ? target = 0 : target += 1;
przewijanieSlajdera( target );
});
// Funkcja przewijająca slajdy do wskazanego indexu (targetu)
function przewijanieSlajdera( target ) {
$slajdy.stop().animate({ "left" : - slajderSzerokoscPx * target });
$menu.removeClass( "aktywny" ).eq( target ).addClass( "aktywny" );
resetInterval();
}
// Automatyczne przewijanie slajdów
function autoPrzewijanie() {
target = $menu.siblings( ".aktywny" ).index();
target == ostatniIndex ? target = 0 : target += 1;
przewijanieSlajdera( target );
}
// Ustawienie interwału i resetu interwału automatycznego przewijania
interwal = setInterval( function(){ autoPrzewijanie(); } , opoznienieSek * 1000 );
function resetInterval() {
clearInterval( interwal );
interwal = setInterval( function(){ autoPrzewijanie(); } , opoznienieSek * 1000 );
}
});
/*PopUp*/
$(function(){
$("[data-popup]").click(function(e){
$($(this).attr("data-popup")).find(".popup-overlay").fadeIn("slow");
e.preventDefault();
});
$(".popup-exit").click(function(){
$(".popup-overlay").fadeOut("slow");
});
$(document).keyup(function(e){
if(e.keyCode==27)
{
$(".popup-overlay").fadeOut("slow");
}
});
$(".popup-overlay").click(function(){
$(".popup-overlay").fadeOut("slow");
}).children().click(function(){
return false;
});
});
/* wysuwana zakladka*/
$(function(){
$(" .zakladka").click(function(){
$(" .zakladka").animate({right:0});
widoczna = true;
});
$("html").click(function(){
if(widoczna == false)
{
$(".zakladka").animate({right: -250});
}
else
{
$(".zakladka").animate({right: 0});
widoczna = false;
}
});
});
Przeanalizuj sobie zmiany:
http://jsfiddle.net/kapitalny/b9rhkp8a/
Pomijając to, że bym to całkiem przepisał, wprowadziłem następujące zmiany:
Ogólnie jeszcze raz powtórzę:
Dzieki wielkie za POMOC!!Ale jak będę miałjakieś pytanie do tego to będę pytał bo jutro będę dalej analizował kod :)
Trochę czasu minęło ale dalej nie rozumiem:) Dlaczego .slice(0,-2)?Jestem świeżak ale to chyba dotyczy wybierania jakiś elementów:)
function odczytajSzerokoscSlajdera() {
return $(".slajder").css('width').slice(0, -2);
}
Patrząc na tą funkcję to ona zwraca szerokosc slajdera z css:)
A tutaj nie wiem jak to się stało że wgl zostalo zastosowane to slice() i taka wartość:)Byłbym wdzięczny za wyjaśnienie:))
Nie wiem czy to będzie mi ta sama osoba pomagała czy inna także podaje link do tego slajdera :)
http://jsfiddle.net/kapitalny/b9rhkp8a/
Pozdrawiam :)
@Olśnienie7
Poczytaj sobie co robi slice() -> https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/String/slice
W tym wypadku po wykonaniu:
$(".slajder").css('width')
masz coś w stylu:
1000px
No ale potrzebna Ci liczba, to tniesz kawałek stringa od pierwszego znaku (index 0) do trzeciego od końca (-2). Nic skomplikowanego.