TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de filtrado de imágenes en el sitio Weebly?

2

El widget de filtrado de imágenes gratuito para el sitio Weebly le permite mostrar los elementos de la cartera en un diseño de tres columnas con una opción de filtrado basada en la categoría predefinida. Ayuda a los usuarios a filtrar la categoría relevante, hacer clic en los resultados filtrados e ir a esa página en particular para obtener más detalles. Puede utilizar este widget no solo para carteras, sino también para elementos de menú, productos y en muchos otros escenarios útiles. El widget se verá a continuación y puede descargar los archivos aquí.

¿Cómo agregar un widget de filtrado de imágenes en el sitio Weebly?

El widget contiene un script de filtrado de isótopos junto con el marco Bootstrap para colocar los paneles en un diseño de 3 columnas. Descargue y extraiga el archivo ZIP de origen en su computadora local, el archivo contiene los siguientes elementos:

  • Image Filter.html: este archivo contiene código HTML
  • Activos: contiene todos los CSS, los scripts y las imágenes del widget.

Abra el archivo "Imge Filtering.html" en el navegador para ver cómo funciona el widget. Básicamente, necesita una imagen, un título y una descripción para cada panel junto con una categoría para filtrar. Siga los pasos a continuación para agregar el widget de filtrado de imágenes a su Sitio Weebly.

Paso 1: carga de imágenes en el sitio de Weebly

Prepare sus imágenes similares a los tamaños de imagen (644 x 420px) en la carpeta "assets / img" y cargue todas las imágenes requeridas para el widget en "Theme> Edit HTML / CSS > Assets". Recomendamos crear una nueva carpeta llamada "ImageFiltering" y cargar todas las imágenes en esa carpeta. La ruta del archivo de la imagen de Weebly será como " http://youesite.com/files/theme/ImageFiltering/image1.jpg ".

¿Cómo agregar un widget de filtrado de imágenes en el sitio Weebly?

Carga de activos en Weebly

Paso 2: carga de CSS

Hay dos archivos CSS en la carpeta de activos: Bootstrap.css y el ImageFiltering.css personalizado. Sube ambos archivos CSS en la carpeta "ImageFiltering" en tu sitio Weebly.

Paso 3: carga de archivos de secuencia de comandos

Todo el widget está controlado por seis diferentes scripts también disponibles en la carpeta de activos. Sube los seis archivos de scripts en la carpeta "ImageFiltering" en tu sitio Weebly.

Paso 4: agregar HTML

Ahora que ha agregado las imágenes, CSS y scripts requeridos, vaya a la página en la que desea agregar el widget, arrastre el elemento de código de inserción y el código HTML del widget.

  • Puede obtener el código HTML abriendo el archivo “Image Filter.html" con cualquier editor de texto como Notepad o TextEdit.
  • Elimine la hoja de estilo (primeras líneas) y los enlaces de los scripts (últimas líneas) y copie el HTML restante en otro archivo de texto.
  • Reemplace las URL de la imagen con las suyas propias obtenidas en el paso 1 y reemplace el título / descripción con su propio contenido.

Defina todas sus categorías y habilite los botones de filtrado para esas categorías. En este ejemplo, hemos utilizado 4 categorías junto con la opción "Todos" que se puede ver en el HTML como se muestra a continuación.

<!-- Filter Buttons --> <div class="portfolio-filter-container margin-top-20"> <ul class="portfolio-filter"> <li class="portfolio-filter-label label label-primary"> filter by: </li> <li> <a href="#" class="portfolio-selected btn btn-default" data-filter="*">All</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".HTML">HTML</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".CSS">CSS</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".PHP">PHP</a> </li> </ul> </div> <!-- End Filter Buttons -->

Estos botones de filtro se pueden ver en la parte superior del widget como se muestra a continuación:

¿Cómo agregar un widget de filtrado de imágenes en el sitio Weebly?

Filtrar botones en el widget

Cada artículo de la cartera se identifica con una de las 4 categorías anteriores para que el filtrado pueda funcionar correctamente. Por ejemplo, a continuación se muestra el elemento de cartera identificado como categoría CSS que se mostrará cuando se haga clic en el botón de filtro "CSS".

<!-- Portfolio Item --> <div class="col-md-4 portfolio-item margin-bottom-40 CSS"> <div> <a href="#"> <h3 class="margin-top-20">This is a CSS filter</h3> <figure> <img src="assets/img/image1.jpg" alt="image1"> <figcaption> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </figcaption> </figure> </a> </div> </div> <!-- End Portfolio Item -->

Asegúrese de identificar todos sus artículos con una de las categorías definidas en la sección de filtrado.

Paso 5: vinculación de scripts y CSS

El último paso es vincular los scripts y archivos CSS cargados en los pasos 2 y 3 a su página de Weebly. Agregue el siguiente código en la sección "Código de pie de página" para vincular los scripts:

<!-- Scripts --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="/files/theme/ImageFiltering/scripts.js"></script> <!-- Isotope - Portfolio Sorting --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.isotope.js" type="text/javascript"></script> <!-- Animate on Scroll--> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.visible.js" charset="utf-8"></script> <!-- Modernizr --> <script src="/files/theme/ImageFiltering/modernizr.custom.js" type="text/javascript"></script> <!-- End Scripts -->

Agregue el siguiente código en la sección "Código de encabezado" para vincular los archivos CSS:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

Publique su sitio para ver el widget de filtrado de imágenes en acción.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More