Portfolio con google spreadsheet 
Autor: Jerome P.
Visitado 1721,
Followers 2,
Compartido 0
Buenas tardes a todos
Nuevamente aqui , intentando compartir script que complementan ciertas funciones de website x5. En este caso, logre encontrar en internet un script que funciona bastante bien y que permite enlazar tabla de datos de google y mostrar los resultados bajo forma de portfolio. Ademas de permitir visualizar y acomodar todo a nuestro gusto.
Ciertamente, toque parte del codigo ya que ciertas partes no estaban bien definidas pero parece funcionar correctamente. Les paso el video donde se ve lo que hice y tambien el script. Lo intentare comentar con detalle mas adelante.
Saludos
Publicado en
Autor
El script es el siguiente. Una parte se pega en HTML y la otra en el CSS
<div class="filtering-bar">
<div class="filter">
<input type="text" id="search-text" placeholder="Buscar" class="Caja-busqueda"><!-- Buscador -->
</div>
</div>
<div id="image-grid">
<div class="inner-wrapper">
<script id="team-rbi-template" type="text/x-handlebars-template"><!-- handlbar es una plantilla y un objeto de entrada para generar HTML u otros formatos de texto-->
<div class="modal"><!-- Modal son los cuadros de dialogo en Bootstrap-->
<!-- Elemento de cierre de la tarjeta descriptiva (cruz) -->
<div class="overlay">
<a class="modal__cierre" href="#"><div class="fa fa-times modal__cierre"></div></a>
</div>
<!-- tarjeta descriptiva de lo seleccionado -->
<div class="modal__contents modal--transition">
<img src="{{cells.Imagen}}"><!-- imagen de la selección -->
<div class="info-box">
<h3 class="Titulo-detalle">{{cells.Titulo}}</h3><!-- Titulo de la seleccion -->
<p class="Informacion-detalle">{{cells.Descripcion}}</p><!-- Detalle de la seleccion -->
</div>
</div>
</div>
<div class="image-container">
<span class="img" style="background-image: url('{{cells.Imagen}}');"></span>
<h2>{{cells.Titulo}}</h2>
<p class="Informacion-detalle">{{cells.Description}}</p><!-- Detalle de la seleccion -->
<!-- barra lateral de tarjeta con enlaces -->
<div class="side-bar">
<a href="{{cells.Imagen}}" class="imgLink" download="{{cells.Titulo}}">
<div class="fa fa-floppy-o"></div>
</a>
<a href="mailto:?subject=Deseo detalles de {{cells.Titulo}}&body={{cells.Titulo}}%0D%0A{{cells.Descripcion}}%0D%0A{{cells.ImageURL}}"><!-- apertura de correo con datos correspondientes de la seleccion -->
<div class="fa fa-envelope-o"></div>
</a>
<a href="#" class="btn">
<div class="fa fa-search-plus"></div>
</a>
</div>
</div>
</script>
</div>
</div>
<!-- Cargamos los componentes -->
<!-- primer componente los iconos gratuitos-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.0/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__cierre', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
var jobCount = $('#image-grid .image-container').length;
$('.list-count').text(jobCount + ' items');
$("#search-text").keyup(function () {
//$(this).addClass('hidden');
var searchTerm = $("#search-text").val();
var listItem = $('#image-grid').children('.image-container');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#image-grid .image-container").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).addClass('hiding out').removeClass('in');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
$("#image-grid .image-container:containsi('" + searchSplit + "')").each(function(e) {
$(this).removeClass('hidden out').addClass('in');
setTimeout(function() {
$('.in').removeClass('hiding');
}, 1);
});
var jobCount = $('#image-grid .image-container').length;
$('.list-count').text(jobCount + ' items');
//shows empty state text when no jobs found
if(jobCount == '0') {
$('#list').addClass('empty');
}
else {
$('#list').removeClass('empty');
}
});
// Definir la URL de la hoja de cálculo.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1JeroSzh9DrPMDsHWCcru5vtZKw6WGFJinf3eDdk6Xqo/edit#gid=0'
// Compile la plantilla de manillar para los líderes de RBI del equipo.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());
//Carga los cinco mejores líderes de RBI del equipo.
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: RBITemplate
});
});
( function($) {
/**
* Nuestro evento de activación para abrir la superposición. Esta clase
* debe existir en el gatillo de superposición, así como un
* atributo (superposición de datos) para identificar la superposición que se va a abrir.
*/
$( '.overlay-trigger' ).on( 'click', function( event ) {
event.preventDefault();
/**
* Establecer la variable de superposición en función de los datos proporcionados
* por el gatillo de superposición.
*/
var overlay = $( this ).data( 'overlay' );
/**
* Si la variable de superposición no está definida, dar un mensaje
* y regreso.
*/
if ( ! overlay ) {
console.log( 'You must provide the overlay id in the trigger. (data-overlay="overlay-id").' );
return;
}
/**
* Si hemos llegado hasta aquí, deberíamos tener los datos
* necesario para abrir una superposición. Aquí establecemos la variable id
* Basado en la variable de superposición.
*/
var id = '#' + overlay;
/**
* Abramos la superposición y evitemos que el cuerpo
* Desplazamiento, ambos mediante la adición de una clase simple. El resto
* es manejado por CSS (impresionante).
*/
$( id ).addClass( 'overlay-open' );
$( 'body' ).addClass( 'overlay-view' );
/**
* Cuando la envoltura exterior de superposición o 'superposición-cierre'
* Se hace clic en triger, permite eliminar las clases de
* La superposición y el cuerpo actuales. Eliminación de estos
* clases restaura el estado actual del usuario
*experiencia. Una vez más, todo manejado por CSS (impresionante).
*/
$(document).on( 'click', id, function( event ) {
// Verify that only the outer wrapper was clicked.
if ( event.target.id == overlay ) {
$( id ).removeClass( 'overlay-open' );
$( 'body' ).removeClass( 'overlay-view' );
}
});
/**
* Cierra la superposición cuando se presiona la tecla esc. Ver
* Comentario anterior sobre el cierre de la superposición para obtener más información
* sobre cómo se logra esto.
*/
$( document ).keyup( function( event ) {
// Verify that the esc key was pressed.
if ( event.keyCode == 27 ) {
$( id ).removeClass( 'overlay-open' );
$( 'body' ).removeClass( 'overlay-view' );
}
});
});
}) (jQuery);
</script>
Parte del CSS
#image-grid {/* caracteristicas de la rejilla en la que se muestran las tarejetas */
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: block;
float: none;
/*height: 700px;*/
overflow: visible;/* Se define como se vera las tarjetas en la pagina. visible, implica que la pagina sera del tamaño de la lista de tarjetas, scroll implica que aparece una barra lateral en el momento que se supere la altura permitida */
margin-top: 54px;/*margen superior en el que empieza la rejilla*/
background: #EAEAEA;
border-radius: 3px;
}
.image-container {
position: relative;
float: left;
overflow: hidden; /* En caso de que el contenido sea mas grande que la caja, el contenido se recorta propiedad hidden */
margin: 10px 1%;/* Es el espaciamiento vertical de las tarjetas */
min-width: 220px;/* Anchura minima de la tarjeta */
max-width: 276px;/* Anchura maxima de la tarjeta */
max-height: 200px;/* Altura maxima de la tarjeta */
width: 100%;
background: #222222;/* Es el color de fondo de la tarjeta */
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.image-container * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.image-container .img {
min-width: 100%;
position: relative;
top: 0;
opacity: 1.0;
left: 0;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
background-size: cover;/* contain implica que la imagen se adapta al tamaño de la tarjeta- Para otros formatos ver documentacion css*/
background-repeat: no-repeat;
width: 280px;
background-position: center -70px;
height: 280px;
display: block;
}
.image-container>div {
height: 100%;
right: -80px;
width: 64px;
position: absolute;
border-left: 2px solid #EAEAEA;
top: 0;
padding: 10px 9px;
color: #ffffff;
background: #222222;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: 25px;
}
.image-container h2 {/* caracteristicas del titulo de la tarjeta */
position: absolute;
left: -100%;/* Posicion inicial izquiera del titulo antes de pasar el raton*/
top: -10px;/* Posicion inicial vertical del titulo antes de pasar el raton*/
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
font-size: 18px;/* Tamaño de letra del titulo de la tarjeta */
color: #C7C7C7;/* Color de letra del titulo de la tarjeta */
font-family: arial;/* Tipo de letra del titulo de la tarjeta */
font-weight: 200;
}
.image-container:hover h2 {/* caracteristicas del titulo de la tarjeta cuando esta encima el raton*/
position: absolute;
top: 2px;/* Posicion final vertical del titulo*/
left: 8px;/* Posicion final izquierda del titulo*/
}
.image-container>div a .fa {/* caracteristicas de la barra lateral que aparece*/
display: inline-block;
font-size: 28px;/* tamaño de la fuente en este caso del icono*/
color: #ffffff;/* color de la fuente en este caso del icono*/
opacity: 0.75;/* opacidad de la fuente en este caso del icono*/
width: 100%;
padding: 5px 15px 40px;/* margenes : primero: espaciado arriba, segundo distancia del borde izquierdo, tercero inferior*/
position: relative;
/* right: -60px !important; */
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-text-stroke: .9px #222222;
}
.image-container:hover .img {/* caracteristicas de la imagen de fondo de la tarjeta cuando esta encima el raton*/
opacity: 0.2;/* opacidad de la imagen de fondo de la imagen 0 = opaco y 1= transparente*/
left: -60px;/* desplazamiento izquierdo de la imagen de fondo cuando se pasa el raton por encima*/
}
.image-container:hover>div {
right: 4px;
opacity: 1;
}
.image-container:hover>div a .fa {
right: 3px;
}
.image-container:hover a .fa {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.filtering-bar {
position: relative;
top: 0px;
width: 100%;
background-color: #333333;
left: 0;
display: block;
padding: 15px 0;
z-index: 1;
margin: 0 auto;
float: none;
margin-bottom: -56px;
}
.filter {
max-width: 1177px;
margin: 0 auto;
display: block;
}
.Caja-busqueda {
max-width: 275px;
padding: 8px 5px;
width: 100%;
font-size: 12px;
border: no-border;
outline: none !important;
margin: 0 15px 0 0;
border-radius: 3px;
box-shadow: none;
border: none;
background-color: #EAEAEA;
color: #737373;
}
.hiding {
margin-left: -100%;
opacity: 0.5;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
}
.hidden {
display: none;
}
.overlay {
background: rgba(0, 0, 0, .012);
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
margin: 0 auto;
height: 700px;
max-width: 1200px;
left: 0;
}
.modal {
visibility: hidden;
}
.modal__contents {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
top: 80px;
}
.modal__contents h1 {
margin: 0;
padding: 0;
line-height: 32rem;
text-align: center;
display: block;
}
.modal__cierre {
position: absolute;
right: 20px;
top: 0;
font-size: 50px;
color: #EAEAEA;
text-decoration: none;
display: block;
cursor: pointer;
}
.modal--show {
visibility: visible;
width: 100%;
position: absolute !important;
z-index: 50;
opacity: 1;
height: 100%;
}
.modal--transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal--show .modal--transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.info-box {
position: relative;
bottom: 7px;
background-color: #EAEAEA;
height: auto;
min-height: 75px;
width: 100%;
display: block;
z-index: 1;
padding: 2px 8px;
}
.Titulo-detalle {
margin: 0 !important;
line-height: 0;
font-size: 24px;
font-weight: 600;
text-align: left;
color: #333333;
padding-top: 18px;
}
.Informacion-detalle {
font-size: 12px;
margin-top: 16px;
color: dimgrey;
letter-spacing: 0.5px;
line-height: 14px
}
Autor
Miren el video
https://drive.google.com/file/d/11buobJW6MFD6cgJRDEmycL0dwjQZYPw9/view?usp=share_link
Hola Jerome P.
Excelente, gracias por compartir, ayuda a crecer al HelpCenter.
Genial, está de revisar
Saludos
Jorge M.
Autor
Gracias Jorge. ya logre modificar bastante el codigo para poder ver fichas completas de las selecciones.
Esto permite poder hacer como catalogos, ofertas de empleo, casas en renta, etc.
Os lo pasare cuando acabe de adapatarlo a mis necesidades que son fichas tecnicas de equipamientos.
Saludos
Hola Jerome,
Muy buenooo!! voy a darle seguimiento a este hilo para ver como lo terminas... muy buena idea!
Saludos colegas!
Carlos A.
@Jerome...
url della fonte dello script originale ?
url de la fuente del script original ?
grazie
Autor
Hola Claudio,
No es una fuente unica ya que fueron consultas en foros de resolucion de problemas y pude aporvcehar partes de esas fuentes para adaptarles.
En breve os pasare las modificaciones que hice y creo que abre un gran abanico de opciones. Evidentemente, yo tengo muchas limitaciones ya que no soy programador y solo lo analizo por pura curiosidad.
Pero la verdad es que ya con esta base de codigo he podido hacer que aperezcan todos los campos que desee y con css adaptar a mis necesidades.
Un una rato mas os enseño como esta quedando a falta de incoporar enlaces y dar un poco mas de forma. Saludos
Autor
Enlace del video para observar como voy
https://drive.google.com/file/d/1ysPZtxEA7sdtHtvNt5sDDXprJ1xGhgzp/view?usp=share_link
Autor
De todas formas dejo el enlace de donde saque este codigo
Dynamically created content shows the same title / description? - CodeProject
...más que un vídeo, sería interesante ver el resultado real en un sitio web...
Autor
Buenos dias
Tienes el codigo arriba del primer video. Solo es pegarlo en el objeto HTLM para ver como funciona . El segundo video muestra como lo estoy adaptando a mis necesidades y todavia estoy desarollandolo. Cuando lo termine, con mucho gusto lo comparto de la misma forma.
Saludos
Autor
Buenos dias a todos
Necesito ayuda para que funcione correctamente la paginacion. Como dije no soy programador y no logro resolver este tema, pero identifico el problema.
la paginacion depende de una variable nrow que esta en cero ya que no se logra definir el numero de tarjetas. Si esa variable la cambio por el valor 32 que corresponde a los 32 registro del google spreadsheet, logro que la paginacion funcione.
Por lo que puedo lograr identificar es que el script no se lanza en el momento correcto y por lo tanto no toma el valor del numero de tarjetas.
Otra cosa que tambien me gustaria resolver es la alineacion de las tarjetas que no logro que se adapten correctamente y se que eso es mas de css.
Yo intentare resolverlo pero me va a costar bastante por faclta de conocimientos.
Gracias de antemano
Dejo el script y el video donde podemos ver como funciona el tema de la variable
Autor
<!--Barra del buscador -->
<div class="filtering-bar">
<div class="filter">
<input type="text" id="buscador" placeholder="Buscar" class="Caja-busqueda"><!-- Buscador -->
</div>
</div>
<!--Zona del portfolio y de las fichas -->
<div id="image-grid">
<div class="image-grid">
<script id="Plantilla-datos" type="text/x-handlebars-template"><!-- handlbar es una plantilla y un objeto de entrada para generar HTML u otros formatos de texto-->
<div class="modal"><!-- Modal son los cuadros de dialogo en Bootstrap-->
<!-- Elemento de cierre de la tarjeta descriptiva (cruz) -->
<div class="overlay">
<a class="modal__cierre" href="#"><div class="fa fa-times modal__cierre"></div></a>
</div>
<!-- tarjeta descriptiva de lo seleccionado -->
<div class="modal__contents modal--transition">
<div class="Titulo">
<h2>Descripcion del modulo </h2>
</div>
<div class="cabecera">
<!-- Parte superior - Lado izquierdo imagen -->
<div class="LateralIzquierdo-box">
<img src="{{cells.Imagen}}"><!-- imagen de la selección -->
<p> modelo {{cells.Modelo}}</p>
</div>
<!-- Parte superior - Lado central descricpión -->
<div class="info-box">
<p class="Informacion-detalle">{{cells.Descripcion}}</p><!-- Detalle de la seleccion -->
<table class="info-box table">
<tr>
<td class="Th3"> Tecnología</td>
<td class="Th4">: </td>
<td class="Th5"> {{cells.TipoCelda}}</td>
</tr>
<tr>
<td class="Th3">Potencia</td>
<td class="Th4">: </td>
<td class="Th5"> {{cells.MaximaPotenciaSTC}}</td>
</tr>
<tr>
<td class="Th3"> País</td>
<td class="Th4">: </td>
<td class="Th5"> {{cells.Pais}}</td>
</tr>
</table>
</div>
<!-- Parte superior - Lado derecho logo y vinculos -->
<div class="lateral-box">
<img src="{{cells.Logo}}"><!-- imagen de la selección -->
<button class="button button1" onclick="window.location.href = '{{cells.EnlaceWeb}}';">Ir a pagina fabricante</button>
<button class="button button2"onclick="window.location.href = '{{cells.PDF}}';">Descarga folleto</button>
</div>
</div>
<div class="Titulo">
<h2>Datos técnicos</h2>
</div>
<div class="cabecera-datos">
<div class="Datos-box">
<table class="Datos-box table">
<tr class="Thprincipal">
<th colspan="7">Datos eléctrico</th>
</tr>
<tr class="Th1">
<th>Potencia máxima en STC (Pmáx)</th>
<th>Voltaje maxima potencia (Vmpp)</th>
<th>Intensidad maxima potencia (Impp)</th>
<th>Voltaje circuito abierto (Vco)</th>
<th>Intensidad corto circuito (Icc)</th>
<th>Eficiencia del modulo</th>
<th>Tolerancia</th>
<tr>
<tr class="Th2">
<th> W/panel</th>
<th>V</th>
<th>I</th>
<th>V</th>
<th>I</th>
<th>%</th>
<th>%</th>
<tr class="Td">
<td> {{cells.MaximaPotenciaSTC}}</td>
<td> {{cells.VmppSTC}}</td>
<td> {{cells.ImppSTC}}</td>
<td> {{cells.VocSTC}}</td>
<td> {{cells.IscSTC}}</td>
<td> {{cells.Rendimiento}}</td>
<td> {{cells.Tolerancia}}</td>
</tr>
</table>
<table class="Datos-box table">
<tr class="Thprincipal">
<th colspan="5">Coeficientes de temperatura</th>
</tr>
<tr class="Th1">
<th>Rango de temperatura</th>
<th>Coeficiente de temperatura de Pmpp</th>
<th>Coeficiente de temperatura de Vco</th>
<th>Coeficiente de temperatura de Isc</th>
<th>NOCT</th>
<tr>
<tr class="Th2">
<th>°C</th>
<th>%/°C</th>
<th>%/°C</th>
<th>%/°C</th>
<th>°C</th>
<tr class="Td">
<td> {{cells.TempOperacion}}</td>
<td> {{cells.CoefPmax}}</td>
<td> {{cells.CoefVoc}}</td>
<td> {{cells.CoefIsc}}</td>
<td> {{cells.NOCT}}</td>
</tr>
</table>
<table class="Datos-box table">
<tr class="Thprincipal">
<th colspan="2">Limites de funcionamiento</th>
</tr>
<tr class="Th1">
<th>Tensión máxima del sistema</th>
<th>Intensidad máxima (Fusible)</th>
<tr>
<tr class="Th2">
<th>V</th>
<th>I</th>
<tr>
<tr class="Td">
<td> {{cells.MaximoVoltaje}}</td>
<td> {{cells.MaxIntensidad}}</td>
</tr>
</table>
</div>
<div class="datosimage-box">
<img src="{{cells.DibujoDimensiones}}"><!-- imagen de la selección -->
</div>
<div class="lateraldatos-box">
<table class="lateraldatos-box table">
<tr class="Th1">
<th>Conceptos</th>
<th>Datos</th>
<tr>
<tr class="Td">
<td> Celda solares</td>
<td> {{cells.NumeroCelda}} de silicio {{cells.TipoCelda}} de {{cells.TamañoCelda}} </td>
</tr>
<tr class="Td">
<td> Dimensiones</td>
<td> {{cells.Dimensiones}}</td>
</tr>
<tr class="Td">
<td> Peso</td>
<td> {{cells.Peso}}</td>
</tr>
<tr class="Td">
<td> Tipo de vidrio</td>
<td> {{cells.Cristal}}</td>
</tr>
<tr class="Td">
<td> Tipo de carcasa</td>
<td> {{cells.Carcasa}}</td>
</tr>
<tr class="Td">
<td> Clase de protección caja de interconexión</td>
<td> {{cells.CajaConexiones}}</td>
</tr>
<tr class="Td">
<td> Sección de cable</td>
<td> {{cells.Seccion}}</td>
</tr>
<tr class="Td">
<td> Longitud de cable</td>
<td> {{cells.LongitudCable}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tarjeta">
<span class="img" style="background-image: url('{{cells.Imagen}}');"></span>
<h2>{{cells.Modelo}}</h2>
<p class="Informacion-detalle">{{cells.Description}}</p><!-- Detalle de la seleccion -->
<!-- barra lateral de tarjeta con enlaces -->
<div class="side-bar">
<a href="{{cells.Imagen}}" class="imgLink" download="{{cells.Modelo}}">
<div class="fa fa-floppy-o"></div>
</a>
<a href="mailto:?subject=Deseo detalles de {{cells.Modelo}}&body={{cells.Modelo}}%0D%0A{{cells.Descripcion}}%0D%0A{{cells.ImageURL}}"><!-- apertura de correo con datos correspondientes de la seleccion -->
<div class="fa fa-envelope-o"></div>
</a>
<a href="#" class="btn">
<div class="fa fa-search-plus"></div>
</a>
</div>
</div>
</script>
<!-- barra de la paginación de la starjetas -->
<div>
<ul class="pagination" data-page-size="14">
<li><a href="" rel="prev">Previo</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="" rel="next">Siguiente</a></li>
</ul>
</div>
</div>
<!-- Cargamos las bibliotecas -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.0/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Sricpt de la pagina donde se encuentran todas las funcionalidades, busqueda, paginacion... -->
<script>
$(document).ready(function() {
//Funciones que permite obtener la referencia de la tarjeta seleccionada
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.tarjeta').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__cierre', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
///////////////////////////////////////////////////////////////////////////
//evento desencadenado por soltar una tecla en el objeto texto "buscador"//
///////////////////////////////////////////////////////////////////////////
$("#buscador").keyup(function () {
//variables requeridas para la función de buscar
var valorbuscado = $("#buscador").val();//variable que contiene el valor buscado contenido en el objeto texto "buscador"
var listItem = $('#image-grid').children('.tarjeta');
var searchSplit = valorbuscado.replace(/ /g, "'):containsi('");//busca una parte del texto en las tarjetas
//extends :permite despreciar el ehco de que sean mayusculas o minusculas
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
//en caso que la tarjeta no contenga la parte de texto buscado lanza la clase CSS de ocultar
$("#image-grid .tarjeta").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).addClass('hiding out').removeClass('in');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
//en caso que la tarjeta contenga la parte de texto buscado elimina la clase CSS de ocultar mostrando la tarjeta
$("#image-grid .tarjeta:containsi('" + searchSplit + "')").each(function(e) {
$(this).removeClass('hidden out').addClass('in');
setTimeout(function() {
$('.in').removeClass('hiding');
}, 1);
});
var tarjetaCount = $('#image-grid .tarjeta').length;//Variable con el numero de tarjetas
$('.list-count').text(tarjetaCount + ' items');
//Muestra el estado vacio cuando las tarjetas no se encuentran
if(tarjetaCount == '0') {
$('#list').addClass('empty');
}
else {
$('#list').removeClass('empty');
}
});
/////////////////////////////
//Fin del Evento "buscador"//
/////////////////////////////
// URL de la hoja de calculo de google utilizada
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1Lklc15iG0rwu40GI1FIT9_EubUa7HAkXHAbi5I8ty_c/edit#gid=0'
// Se define la plantilla de handlebar para los líderes de RBI del equipo.
var Datosdeplantilla = Handlebars.compile($('#Plantilla-datos').html());
//Se cargan los datos de la hoja de calculo de google para rellenar la plantilla.
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: Datosdeplantilla
});
});
//////////////////////////////
//paginacion de las tarjetas.//
//////////////////////////////
//
// Obtener número de filas y calcular número de páginas
//
var nRows = $('#image-grid .tarjeta').length;
var nPages = Math.ceil(nRows / $('.pagination').data('page-size'));// redondea a valor superior"pagination" data-page-size
var pagina=$('.pagination').data('page-size')
// Guardar páginas NUM como atributo de datos del elemento de paginación
//
$('.pagination').data('num-pages', nPages);
//
// Crea los botones sobre la marcha
//
for(var i=1; i<nPages; i++) {
$('<li/>').append($('<a/>', {href: "#", text: i + 1})).insertBefore('.pagination li:has([rel]):last');
}
//
// handle pagination
//
$('.pagination li').on('click', function (e) {
//
// prevenir la acción predeterminada
//
e.preventDefault();
//
// El elemento pulsado es el siguiente
//
var eleClicked = $(this);
var nextEle = eleClicked;
//
// En caso de que el elemento pulsado sean siguiente o previo
//
var nextPrevAnchorEle = eleClicked.find('a[rel]');
if (nextPrevAnchorEle.length == 1) {
//
// Activar el siguiente elemento
//
if (nextPrevAnchorEle.text().trim() == 'Next') {
nextEle = $('.pagination li.active').next('li:not(:has([rel]))');
if (nextEle.length == 0) {
nextEle = $('.pagination li:not(:has([rel])):first');
}
} else {
nextEle = $('.pagination li.active').prev('li:not(:has([rel]))');
if (nextEle.length == 0) {
nextEle = $('.pagination li:not(:has([rel])):last');
}
}
}
//
// Alternar pagina activa
//
$('.pagination li.active').removeClass('active');
nextEle.addClass('active');
//
// Obtener el número de la pagina activa
//
var currentPageNumber = +nextEle.find('a').text().trim() - 1;
//
// Obtener el tamaño de la pagina
//
var pageSize = +$('.pagination').data('page-size');
//
// Alternar la visibilidad
//
$('#image-grid .tarjeta').toggle(false);
$('#image-grid .tarjeta').slice(currentPageNumber * pageSize, (currentPageNumber + 1) * pageSize).toggle(true);
});
//
// Mostrar la pagina activa
//
$('.pagination li.active a').trigger('click');
//////////////////////////////////////////////
//fin del evento paginacion de las tarjetas.//
//////////////////////////////////////////////
(function($) {
///////////////////////////////////////////////////////////////////////////////////////////////
//evento de apertura y cierre de la ventana emergente desencadenado por presionar una tecla //
//////////////////////////////////////////////////////////////////////////////////////////////
$('.overlay-trigger' ).on( 'click', function( event ) {
event.preventDefault();
/**Establecer la variable de la ventana emergente en función de los datos proporcionados por el desencadenador del evento*/
var overlay = $( this ).data( 'overlay' );/* variable de la ventana emergente que contiene los datos de la tarjeta
/** Si la variable de la ventana emergente no está definida por falta de datos,
*se muestra un mensaje y de vuelve a la situacion inicial. */
if ( ! overlay ) {
console.log( 'Debe proporcionar el identificador de superposición en el desencadenador. (data-overlay="overlay-id").' );
return;
}
/** en caso de que hayamos pasado la anterior condicion, se supone que
* disponemos de los datos necesario para abrir una ventana emergente.
* Aquí establecemos la variable id Basado en la variable de la ventana emergente.*/
var id = '#' + overlay;
/** Se abre la ventana emergente y evitemos que el cuerpo Desplazamiento, ambos mediante la adición de una clase simple.
* El resto es manejado por CSS */
$( id ).addClass( 'overlay-open' );
$( 'body' ).addClass( 'overlay-view' );
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//evento de cierre de la ventana emergente desencadenado por presionar el desencadenador de cierre de la ventana//
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
/** Eliminación de las clases y restaura el estado inicial a tarves del CSS.*/
$(document).on( 'click', id, function( event ) {
// Se comprueba que se haya echo clic fuera del contenedor.
if ( event.target.id == overlay ) {
$( id ).removeClass( 'overlay-open' );
$( 'body' ).removeClass( 'overlay-view' );
}
});
///////////////////////////////////////////////////////////////////////////////
//evento de cierre de la ventana emergente desencadenado por presionar escape//
//////////////////////////////////////////////////////////////////////////////
/** Al igual que antes, se eliminan las clases y restaura el estado inicial a tarves del CSS.*/
$( document ).keyup( function( event ) {
/** Verifica que la tecla escape esta presionada.*/
if ( event.keyCode == 27 ) {
$( id ).removeClass( 'overlay-open' );
$( 'body' ).removeClass( 'overlay-view' );
}
});
});
}) (jQuery);
</script>
HTL
Autor
Y el CSS es
#image-grid {/* caracteristicas de la rejilla en la que se muestran las tarejetas */
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
float: none;
overflow: visible;/* Se define como se vera las tarjetas en la pagina. visible, implica que la pagina sera del tamaño de la lista de tarjetas, scroll implica que aparece una barra lateral en el momento que se supere la altura permitida */
margin-top: 54px;/*margen superior en el que empieza la rejilla*/
height: 1200px;
}
.tarjeta {
position: relative;
float: left;/* pone las tarjetas en la misma linea */
overflow: hidden; /* En caso de que el contenido sea mas grande que la caja, el contenido se recorta propiedad hidden */
margin: 10px 1.8%;/* Es el espaciamiento vertical de las tarjetas. El porcentaje es el horizontal. Para ajustar tarjetas jugar con ese porecntaje y con la max width */
min-width: 100px;/* Anchura minima de la tarjeta */
max-width: 200px;/* Anchura maxima de la tarjeta */
max-height: 200px;/* Altura maxima de la tarjeta */
width: 100%;
background: #222222;/* Es el color de fondo de la tarjeta */
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tarjeta * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tarjeta .img {/* caracteristicas de la imagen de la terjeta */
min-width: 100%;/* ancho de la tarjeta cuando es porcentual se basa en el ancho porcentual con respecto a su contenedor */
position: relative;
top: 0;/* Margen superior de la imagne de la tarjeta */
opacity: 1.0;
left: 0;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
background-size: cover;/* contain implica que la imagen se adapta al tamaño de la tarjeta- Para otros formatos ver documentacion css*/
background-repeat: no-repeat;
width: 80%;
background-position: center 0px;
height: 200px;/* Altura maxima de la imagen dentro de la tarjeta */
display: block;
}
.tarjeta>div {
height: 100%;
right: -60px;
width: 60px;
position: absolute;
border-left: 2px solid #FF8000;
top: 0;
padding: 10px 9px;
color: #ffffff;
background: #FF8000;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: 25px;
}
.tarjeta h2 {/* caracteristicas del titulo de la tarjeta */
position: absolute;
left:5px;/* Posicion inicial izquiera del titulo antes de pasar el raton*/
top: 2px;/* Posicion inicial vertical del titulo antes de pasar el raton*/
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
font-size: 18px;/* Tamaño de letra del titulo de la tarjeta */
color: #C7C7C7;/* Color de letra del titulo de la tarjeta */
font-family: arial;/* Tipo de letra del titulo de la tarjeta */
font-weight: bold;
}
.tarjeta:hover h2 {/* caracteristicas del titulo de la tarjeta cuando esta encima el raton*/
position: absolute;
top: 2px;/* Posicion final vertical del titulo*/
left: 8px;/* Posicion final izquierda del titulo*/
color:#FF8000 ;/* Color de letra del titulo de la tarjeta */
}
.tarjeta>div a .fa {/* caracteristicas de la barra lateral que aparece*/
display: inline-block;
font-size: 28px;/* tamaño de la fuente en este caso del icono*/
color: #ffffff;/* color de la fuente en este caso del icono*/
opacity: 0.85;/* opacidad de la fuente en este caso del icono*/
width: 100%;/* ancho de la tarjeta*/
padding: 5px 5px 40px;/* margenes : primero: espaciado arriba, segundo distancia del borde izquierdo, tercero inferior*/
position: relative;
right: 0px !important; */
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-text-stroke: .2px #222222;
}
.tarjeta:hover .img {/* caracteristicas de la imagen de fondo de la tarjeta cuando esta encima el raton*/
opacity: 0.2;/* opacidad de la imagen de fondo de la imagen 0 = opaco y 1= transparente*/
left: -60px;/* desplazamiento izquierdo de la imagen de fondo cuando se pasa el raton por encima*/
}
.tarjeta:hover>div {
right: 0px;
opacity: 1;
}
.tarjeta:hover>div a .fa {
right: 3px;
}
.tarjeta:hover a .fa {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.filtering-bar {
position: relative;
top: 0px;
width: 100%;
background-color: #333333;
left: 0;
display: block;
padding: 15px 15px 15px 15px ;
z-index: 1;
margin: 0 auto;
float: none;
margin-bottom: -56px;
}
.filter {
width: 100%;
max-width: 1200px;
margin: auto;
display: block;
}
.Caja-busqueda {
max-width: 275px;
padding: 8px 5px;
width: 100%;
font-size: 12px;
border: no-border;
outline: none !important;
margin: 0 15px 0 0;
border-radius: 3px;
box-shadow: none;
border: none;
background-color: #EAEAEA;
color: #737373;
}
.pagination {
display: inline-block;
padding: 0;
margin: 5px;
}
.pagination li{
display: inline;
}
.pagination li a{
color: #666666;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .2s;
transition: border .2s;
border: 1px solid #ddd;
margin: 0 4px; /* separacion entre números de la paginacion*/
}
.pagination li.active a {
background-color: #FF8000;
border: 1px solid #FF8000;
color: white
}
.pagination li:hover a:not(.active) {
background-color: #ddd;
border: 1px solid #ddd;
}
.hiding {
margin-left: -100%;
opacity: 0.5;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
}
.hidden {
display: none;
}
.overlay {
background: rgba(0, 0, 0, .012);
position: absolute;
top:0px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 100%;
}
.modal {
visibility: hidden;
}
.modal__contents {
width: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 50px;
border-radius: 3px;
box-shadow: none;
border: line;
background-color: white;
}
.modal__contents img {
margin: 0;
float:left;
padding: 0;
line-height: 3rem;
text-align: center;
display: inline;
}
.modal__contents h3 {
margin: 0px;
padding: 0;
line-height: 4rem;
text-align: center;
display: block;
color: #FF8000;/* Color de letra del titulo de la tarjeta */
}
.modal__cierre {
position: absolute;
right: 20px;
top: 2px;
font-size: 50px;
color: #666666;
text-decoration: none;
display: block;
cursor: pointer;
background-color: white;
width: 100%;
text-align:right;
}
.modal--show {
visibility: visible;
width: 100%;
position: absolute !important;
z-index: 50;
opacity: 1;
height: 100%;
}
.modal--transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal--show .modal--transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.Titulo {
margin: 0px !important;
line-height: 1.5;
background-color: white;
font-size: 36px;
font-weight: bold;
text-shadow: 2px 2px 4px #666666;
text-align: left;
color: #666666;
border-left:10px #3C78D8 solid;
border-bottom: 0.8px #FF8000 solid;
display: block;
}
.cabecera {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 7px;
}
/* Este apartado me permite hacer que los elementos del flex superior se alineen verticalmente cuando el tamaño de la pantalla pasa a 900 px*/
@media (max-width: 900px) {
.info-box,.lateral-box {
flex: 100%;
}
}
.cabecera-datos{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 7px;
}
/* Este apartado me permite hacer que los elementos del flex superior se alineen verticalmente cuando el tamaño de la pantalla pasa a 900 px*/
@media (max-width: 900px) {
.datos-box, .datosimage-box,.lateraldatos-box {
flex: 100%;
}
}
.info-box {
position: relative;
background-color: white;
height: auto;
width: 33%;
padding: 0px 0px ;
display: block;
}
.info-box p {
margin-top:10px;
padding: 0px;
line-height: 1.2rem;
text-align: justify;
font-size: 14px;/* Tamaño de letra del titulo de la tarjeta */
color: #666666;/* Color de letra del titulo de la tarjeta */
font-family: arial;/* Tipo de letra del titulo de la tarjeta */
font-weight: normal;
display: block;
}
.info-box table {
background-color: #F2F2F2;
position: relative;
Top: 20px;
border: 1px solid #3C78D8;
border-radius: 5px;
height: auto;
min-width: 40%;
width: 65%;
margin-left: auto;
margin-right: auto;
padding: 10px 0px 10px 10px;
}
.Th3{
text-align: left;
font-size: 14px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: normal;
color:#FF8000;
width: 125px;
border:none;
}
.Th4{
text-align: center;
font-size: 14px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: normal;
color:#FF8000;
width: 10px;
border:none;
}
.Th5{
text-align: left;
font-size: 14px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: normal;
color:#666666;
width: 125px;
border:none;
}
.LateralIzquierdo-box {
position: relative;
margin-left:auto;
margin-right:auto;
background-color: white;
height: auto;
min-height: 75px;
width: 33%;
display:block;
}
.LateralIzquierdo-box img {
width: 100%;
margin.left:auto;
margin.right:auto;
height: auto;
padding: 5px 5px 5px 5px;
float: none;
}
.LateralIzquierdo-box p {
line-height: 1.2rem;
text-align: center;
font-size: 12px;/* Tamaño de letra del titulo encima de la imagen */
color: #0070BF;/* Color de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: normal;
display:block;
}
.img-box img {/* Esto hace responsive la imagen */
max-width: 100%;
height: auto;
}
.lateral-box {
position: relative;
background-color: white;
height: auto;
min-height: 0px;
display: block;
padding: 12px 0px ;
width: 34%;
}
.lateral-box img {/* Esto hace responsive la imagen */
width: 50%;
margin.left:auto;
margin.right:auto;
height: auto;
border: 1px solid #666666;
padding: 20px 40px 20px 40px;
border-radius: 10px;
float: none;
3
}
.lateral-box button {
margin-top: 15px;/* margen derecho del parafo decriptivo */
width: 80%;
height: auto;
background-color: #FF8000;
color: white;
border: 1px solid #FF8000;
padding: 20px 40px 20px 40px;
line-height: 1.2rem;
text-align: center;
font-size: 14px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: bold;
display: block;
float: none;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
cursor: pointer;
}
.lateral-box button:hover {
background-color: #0070BF;
border: 1px solid #0070BF;
color: white;
transform: scale(1.1);
}
.Datos-box {
position: relative;
background-color: white;
height: auto;
width: 33%;
padding: 0px 0px ;
display: block;
}
.Datos-box table {
position: relative;
margin-Top: 20px;
background-color: White ;
border: 0px solid #DEEAF6;
border-radius: 5px;
height: auto;
min-width: 30%;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0px 4px 4px 4px;
display: block;
}
.Datos-box th,td {
text-align: center;
border: 1px solid #DEEAF6;
padding: 4px 4px 4px 4px;
Column-width:150px;
}
.Th1{
background-color: #FF8000;
color: white;
text-align: center;
font-size: 12px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: bold;
}
.Th2{
background-color: #FFC000;
font-size: 10px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: bold;
color:#783F04;
}
.Thprincipal{
text-align: left;
font-size: 12px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: bold;
color:#FF8000;
width: 100%;
border:1px solid #DEEAF6;
}
.Td{
background-color: white;
font-size: 12px;/* Tamaño de letra del titulo encima de la imagen */
font-family: arial;/* Tipo de letra del titulo encima de la imagen */
font-weight: normal;
color:#666666;
}
.lateraldatos-box {
position: relative;
background-color: white;
height: auto;
width: 33%;
padding: 0px 0px ;
display: block;
float:none ;
}
.lateraldatos-box table {
margin-Top: 20px;
background-color: #white;
position: relative;
height: auto;
min-width: 40%;
width: 95%;
margin-left: auto;
margin-right: auto;
padding: 0px 10px 10px 10px;
}
.Datos-box th,td {
text-align: center;
border: 1px solid #DEEAF6;
padding: 4px 4px 4px 4px;
Column-width:250px;
}
.datosimage-box {
position: relative;
background-color: white;
height: auto;
min-height: 0px;
display: block;
padding: 12px 0px ;
width: 34%;
float: none;
}
.datosimage-box img {/* Esto hace responsive la imagen */
width: 50%;
margin.left:auto;
margin.right:auto;
height: auto;
padding: 20px 40px 20px 40px;
float: none;
}
.Titulo-detalle {
margin: 0 !important;
line-height: 0;
font-size: 24px;
font-weight: 600;
text-align: left;
color: #333333;
padding-top: 18px;
}
.Informacion-detalle {
font-size: 12px;
margin-top: 16px;
color: dimgrey;
letter-spacing: 0.5px;
line-height: 14px
}
Autor
Este el video
https://drive.google.com/file/d/11G3vMqLORw1VX2HeZuYuNtGh_akfIo8B/view?usp=share_link
A ver si alguien sabe de programacion y pueda ayudar. Creo que una vez establecido esto resultara muy util para hacer lo que comentaba anteriormente, paginas de lista empleo, etc
Gracias
Si quieres ayuda, te sugiero que publiques el enlace a tu prueba en línea...