Ver Mensaje Individual
  #7 (permalink)  
Antiguo 26/02/2012, 17:43
Avatar de herzbazi
herzbazi
 
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 9 meses
Puntos: 36
Información Respuesta: css y jqury en mac

Cita:
Iniciado por Sirius381 Ver Mensaje
Ya tengo la captura, el problema era que no tenia las "gnome-utils" ya que trabajo con Ubuntu server y tengo todo al minimo, ok, te dejo la imagen, se aprecian los dos errores que te comente, si quieres descargar la distro para verlo (y probarlo) no estaria mal, te recomiendo algun ubuntu live, lo que hace eso es que se instala el SO en tu RAM y no hay necesidad de hacer particiones ni instalar nada, con reiniciar sacando el disco ya regresas a tu SO nativo sin cambios y sin afectar nada.

De si cambias las dimensiones creo yo (soy novato aun) que solo parchearia el problema, ya que no es una solucion de fondo, ahora el problema seria que en windows se verian unos botones muy grandes y en mac/linux (supongo que es lo mismo) se veria bien, creo que mas bien hay que trabajar con el CSS para que se adapte el contenido al contenedor (texto al botón) y funcione bien siempre.

Oye por curiosidad, con que esta hecho el carrusel que tienes ahi? me gustaria implementar algo asi y ni idea de por donde empezar, te dejo la imagen.

Saludos!


colocas este codigo en tu html

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>


luego vinculas este a tu html

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

creas esto en otro documento y lo vinculas


/ / Simple JavaScript Banner rotativo Usando jQuery
/ / Www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 764;
var jqb_imgH = 277;

jQuery (document). ready (function () {
jqb_vTotal = $ ("jqb_slides.") niños () el tamaño () -1..;
$ ("Jqb_info.") De texto. ($ ("Jqb_slide"). Attr ("title").);
jqb_intInterval = setInterval (jqb_fnLoop, jqb_vDuration);

/ / Horizontal
$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
jqb_tmp = ((i - 1) * jqb_imgW) - ((jqb_vCurrent -1) * jqb_imgW);
$ (This) animate ({"izquierda": jqb_tmp + "px"}, 500).;
});

/ *
/ / Vertical
$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
jqb_tmp = ((i - 1) * jqb_imgH) - ((jqb_vCurrent -1) * jqb_imgH);
$ (This) animate ({"top": jqb_tmp + "px"}, 500).;
});
* /

$ ("# Btn_pauseplay"). Click (function () {
if (jqb_vIsPause) {
jqb_fnChange ();
jqb_vIsPause = false;
$ ("# Btn_pauseplay") removeClass ("jqb_btn_play").;
$ ("# Btn_pauseplay") AddClass ("jqb_btn_pause").;
Else {}
clearInterval (jqb_intInterval);
jqb_vIsPause = true;
$ ("# Btn_pauseplay") removeClass ("jqb_btn_pause").;
$ ("# Btn_pauseplay") AddClass ("jqb_btn_play").;
}
});
$ ("# Btn_prev"). Click (function () {
jqb_vGo = -1;
jqb_fnChange ();
});

$ ("# Btn_next"). Click (function () {
jqb_vGo = 1;
jqb_fnChange ();
});
});

jqb_fnChange function () {
clearInterval (jqb_intInterval);
jqb_intInterval = setInterval (jqb_fnLoop, jqb_vDuration);
jqb_fnLoop ();
}

jqb_fnLoop function () {
if (jqb_vGo == 1) {
jqb_vCurrent == jqb_vTotal? jqb_vCurrent = 0: jqb_vCurrent + +;
Else {}
jqb_vCurrent == 0? jqb_vCurrent = jqb_vTotal: jqb_vCurrent -;
}


$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
if (i == jqb_vCurrent) {
jqb_title = $ (this) attr ("title").;
. $ (". Jqb_info") animate ({opacity: "esconder", "izquierda": "-50px"}, 250, function () {
$ ("Jqb_info.") Texto (jqb_title) animate ({opacity: "show", "izquierda": "0px"}, 500)..;
});
}


/ / Desplazamiento Horizontal
jqb_tmp = ((i - 1) * jqb_imgW) - ((jqb_vCurrent -1) * jqb_imgW);
$ (This) animate ({"izquierda": jqb_tmp + "px"}, 500).;


/ *
/ / Desplazamiento vertical
jqb_tmp = ((i - 1) * jqb_imgH) - ((jqb_vCurrent -1) * jqb_imgH);
$ (This) animate ({"top": jqb_tmp + "px"}, 500).;
* /

/ *
/ / Fade In y Fade Out
if (i == jqb_vCurrent) {
. $ (". Jqb_info") de texto (. $ (This) attr ("title"));
. $ (This) animate ({opacity: 'show', altura: "show"}, 500);
Else {}
. $ (This) animate ({opacity: 'esconder', altura: 'hide'}, 500);
}
* /

});


}



luego tu css y lo vinculas



#jqb_object img{
border: none;
}

#jqb_object {
position:relative;
width:764px; height:277px;
overflow:hidden;
}


#jqb_object .jqb_bar{
position:absolute;
width:764px; height: 30px;
left:0px;
bottom:0px;
background:#000000;
opacity:0.7;
filter:alpha(opacity=50);

color: #ffffff;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
font-size: 18px;
letter-spacing: -1px;
}

#jqb_object .jqb_slide{
position:absolute;
width:764px; height:277px;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
font-size: 18px;
letter-spacing: -1px;
text-align: left;
}

#jqb_object .jqb_info{
position:absolute;
padding: 2px 10px 2px 10px;
float: left;
}

#jqb_object .jqb_btn{
width: 15px; height: 14px;
margin: 10px 5px 2px 2px;
float: right;
}
#jqb_object .jqb_btn_next{
background-image:url(img/btn_next.gif);

}
#jqb_object .jqb_btn_prev{
background-image:url(img/btn_prev.gif);

}
#jqb_object .jqb_btn_pause{
background-image:url(img/btn_stop.gif);

}
#jqb_object .jqb_btn_play{
background-image:url(img/btn_play.gif);

}


por ultimo haces esto en tu html


<div id="jqb_object">



<div class="jqb_slides">





<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_para_caballero_dr_comfort_esdisa?mode=win dow&pageNumber=1" target="_new">

<img src="img/1.png" title="" alt=""/></a></div>





<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_sandalias_aetrex?mode=window&pageNumber=1 " target="_new">

<img src="img/2.png" title="" alt=""/></a></div>





<div class="jqb_slide" title="">

<img src="img/3.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="Ver catálogo de productos">

<a href="http://issuu.com/jzirion/docs/catalogo_tacones_aetrex?mode=window&pageNumber=1" target="_new">

<img src="img/4.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/5.png" title="" alt=""/></div>



<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_para_dama_dr_comfort?mode=window&pageNumb er=1" target="_new">

<img src="img/6.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/7.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/8.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/9.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/10.png" title="" alt=""/></a></div>







<div class="jqb_bar">

<div class="jqb_info"></div>

<div id="btn_next" class="jqb_btn jqb_btn_next"></div>

<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>

<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>



</div>

<img src="img/11.png" title="" alt=""/>

</div>

la lista ahi esta .. me dices si me entiendes por que aveces me cuesta explicar
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..