Efeito Jquery Slide com width e height 100%

[Tonisoueu 0]

Oi pesssoal,

 

Preciso muito mesmo de um help. É o seguinte:

 

Estou desenvolvendo um site e o cliente quer que suas imagens preencham toda a tela independente da resolução de quem acesse o site. Não quero usar o flash. Inseri o plugin s3Slider ( http://www.serie3.info/s3slider/demonstration.html) para usar o jquery. Ele funciona normalmente, porém não consigo deixá-lo adaptável à resolução. Mesmo inserindo no css o width e o height com 100% como valor, ao invés dos pixels, as imagens continuam com o mesmo tamanho.

 

É possível fazer isso com jquery? como?

 

Obrigado galera!!

[Otata 4]

sim.. com

 

$(window).height()/width()

t+

[Tonisoueu 0]

sim.. com

 

$(window).height()/width()

t+

 

 

beleza. Mas onde vou inserir? sou iniciante no jquery. Ainda to meio perdido..rs

[Otata 4]

hehe.. então, tem que pegar a imagem e setar nela o tamanho e largura.

 

<script>
$('#idSuaImagem').css('width',$(window).width());
$('#idSuaImagem').css('height',$(window).height());
</script>

sakou?

[Tonisoueu 0]

hehehe.. ainda não. Vou colocar o codigo. Acho que vai ser mais fácil pra me ajudar né... ve ai brother. Preciso muito da sua ajuda.

 

html:

 

<div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <a href=""><img src="example_images/410/1.jpg" alt="1" /></a>
                <span class="top"><strong>Title text 1</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <a href=""><img src="example_images/410/2.jpg" alt="2" /></a>
                <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/3.jpg" alt="3" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/4.jpg" alt="4" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/5.jpg" alt="5" />
                <span class="top"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
    </div>

 

CSS:

 

<style type="text/css" media="screen">
#slider {
    width: 100%; /* important to be same as image width */
    height: 100%; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}
#sliderContent {
    width: 100%;
	height:100%; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 100%px;
	height:100%;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style>

s3Slider.js:

 

 

(function($){

 

$.fn.s3Slider = function(vars) {

 

var element = this;

var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;

var current = null;

var timeOutFn = null;

var faderStat = true;

var mOver = false;

var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");

var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 

items.each(function(i) {

 

$(items).mouseover(function() {

mOver = true;

});

 

$(items).mouseout(function() {

mOver = false;

fadeElement(true);

});

 

});

 

var fadeElement = function(isMouseOut) {

var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

thisTimeOut = (faderStat) ? 10 : thisTimeOut;

if(items.length > 0) {

timeOutFn = setTimeout(makeSlider, thisTimeOut);

} else {

console.log("Poof..");

}

}

 

var makeSlider = function() {

current = (current != null) ? current : items[(items.length-1)];

var currNo = jQuery.inArray(current, items) + 1

currNo = (currNo == items.length) ? 0 : (currNo - 1);

var newMargin = $(element).width() * currNo;

if(faderStat == true) {

if(!mOver) {

$(items[currNo]).fadeIn((timeOut/6), function() {

if($(itemsSpan[currNo]).css('bottom') == 0) {

$(itemsSpan[currNo]).slideUp((timeOut/6), function() {

faderStat = false;

current = items[currNo];

if(!mOver) {

fadeElement(false);

}

});

} else {

$(itemsSpan[currNo]).slideDown((timeOut/6), function() {

faderStat = false;

current = items[currNo];

if(!mOver) {

fadeElement(false);

}

});

}

});

}

} else {

if(!mOver) {

if($(itemsSpan[currNo]).css('bottom') == 0) {

$(itemsSpan[currNo]).slideDown((timeOut/6), function() {

$(items[currNo]).fadeOut((timeOut/6), function() {

faderStat = true;

current = items[(currNo+1)];

if(!mOver) {

fadeElement(false);

}

});

});

} else {

$(itemsSpan[currNo]).slideUp((timeOut/6), function() {

$(items[currNo]).fadeOut((timeOut/6), function() {

faderStat = true;

current = items[(currNo+1)];

if(!mOver) {

fadeElement(false);

}

});

});

}

}

}

}

 

makeSlider();

 

};

 

})(jQuery);

 

E agora? o que faço???hehe

 

Abração!