Etags Desarrollos




owl carousel con Thumbnails

Category : Development / Programación · No Comments · by Mar 2nd, 2016

Hola, en esta ocasión me gustaría compartir un pequeño código para agregar las imégenes pequeñas al completo carrusel para jquery OWL. Lo hice para la versión más antigua pero no creo que sea complicado aplicarlo a la nueva.
Ver. http://owlgraphic.com/owlcarousel/

Esto no es algo hecho 100% por mi sino que hay códigos similares en la web , sólo que con el que detallo logré hacerlo funcionar fácilente.

<div class="slide-cont">
<div class="owl-carousel">
<div class="item"><a href="images/listing/slideer01.jpg">
<img class="img-responsive" src="images/listing/slideer01.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer02.jpg">
<img class="img-responsive" src="images/listing/slideer02.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer03.jpg">
<img class="img-responsive" src="images/listing/slideer03.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer04.jpg">
<img class="img-responsive" src="images/listing/slideer04.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer05.jpg">
<img class="img-responsive" src="images/listing/slideer05.jpg" alt="img" />
</a></div>
</div>
</div>

Y el Javascript utilizado es:

<script>
    $(document).ready(function() {    
      $(".owl-carousel").owlCarousel({
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          autoHeight:true,
          //Pagination
    	  pagination : true,
    	  paginationNumbers: true,
          singleItem:true,
          afterInit: function(e){
          		add_thumbs_image();
          },
          afterUpdate:function(e){
          		add_thumbs_image();
          }
      });
     
    });
    $(document).ready(function () {
	   
	});

    function add_thumbs_image(){
    	dotcount = 1;
	    $('.owl-numbers').each(function () {
	        $(this).addClass('dotnumber' + dotcount);
	        $(this).attr('data-info', dotcount);
	        dotcount = dotcount + 1;
	    });
	    slidecount = 1;
	    $('.owl-item').not('.cloned').each(function () {
	        $(this).addClass('slidenumber' + slidecount);
	        slidecount = slidecount + 1;
	    });
	    $('.owl-numbers').each(function () {
	        grab = $(this).data('info');
	        slidegrab = $('.slidenumber' + grab + ' img').attr('src');
	        console.log(slidegrab);
	        $(this).css('background-image', 'url(' + slidegrab + ')');
	    });
    }
</script>

Por último aqui algunas modificaciones para que se acomode con CSS

.slide-cont {width: 100%; display: block; margin: 0 auto;}
.owl-pagination{
	display: block;
	width: 100%;
}
.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-page{
	width: 18%;
	margin:1%;
	display: inline-block;
	border: 1px solid #E2E2E2;
}
.owl-numbers{
	width: 100%;
	height: 80px;
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -9999px;
}

Espero que les sirva.

Campos extra en Visual FormBuilder

Category : Development / Programación · No Comments · by Dec 24th, 2014

En esta ocasón me gustaría poner aquí un tip simple para agregar campos a un formulario pre hecho con VFB.
En mi caso necesitaba agregar los campos del formulario de un producto de woocommerce y precisaba añadir los campos de título, id y url.
Asi que decidí utilizar Visual Form Builder que es bastante sencillo de utlizar y muy gráfico.
Para esto cree un arreglo con los campos que desee crear , y los agregué en el archivo de funciones de mi tema.

Latitud y longitud.

Category : Development / Programación · No Comments · by Apr 6th, 2014

La semana anterior tuve que generar una búsqueda de empresas en un radio dado por una coordenada en latitud y longitud.

Paypal REST API

Category : Development / Programación · No Comments · by Mar 19th, 2014

Estuve trabajando un poco con la integración de Paypal Rest API y php, y en el servidor final del cliente me generaba el error de  ” Failed to connect”, luego de tratar varios aspectos me di cuenta que el servidor del cliente tiene un firewall que bloquea las salidas externas.

En el panel del servidor habilité estas ip´s para que el CURL las pueda acceder y finalmente funcionó.

Espero que les sirva el TIP ya que no encontré mucha información sobre errores comunes en la integración de la API de Paypal.

Aranceles para los dominios .ar

Category : Dominios · No Comments · by Mar 1st, 2014
Aranceles para los dominios .ar

En el día de hoy me enterá que a partir del próximo miércoles 5 de marzo los dominios nuevos y…

Bienvenidos al sitio de Etags

Category : Uncategorized · No Comments · by Feb 9th, 2014

Bienvenidos al nuevo sitio de Etags, aunque bastante simple es una buena manera de comenzar, espero aprovechar este lugar para ir posteando nuevas noticias en materia de diseño y programación.

Trataré de al menos una vez a la semana ir haciendo comentarios de los trabajos realizados y de darme un tiempito para ir dando alguna ayuda a quien comienza o dando consejos en base a algun problema que haya surgido a la hora de realizar algún proyecto.

Desde ya espero que este sitio les guste y estamos aquí dispuestos a escucharlos en lo que necesiten…