I displayed a gallery of images using this code. Right now, images are displayed like expected, but when i click on one, and that image expand on full screen, I can't navigate on next image
import React, { useState, useEffect } from 'react';
import img1 from './assets/img/gallery/gallery-1.jpg';
import img2 from './assets/img/gallery/gallery-2.jpg';
import img3 from './assets/img/gallery/gallery-3.jpg';
import img4 from './assets/img/gallery/gallery-4.jpg';
import img5 from './assets/img/gallery/gallery-5.jpg';
import img6 from './assets/img/gallery/gallery-6.jpg';
import img7 from './assets/img/gallery/gallery-7.jpg';
import img8 from './assets/img/gallery/gallery-8.jpg';
import GLightbox from 'glightbox';
export default function Footer() {
return(
<section id="galerie" class="gallery">
<div class="container">
<div class="section-title">
<h2>Galerie</h2>
<p>In această secțiune vă prezentăm câteva dintre produsele noastre. Pentru a vedea gama completă, va invităm să accesați pagina de Produse.</p>
</div>
</div>
<div class="container-fluid">
<div class="row g-0">
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img1} onClick={handleClick}>
<img src={img1} alt="" class="img-fluid" onClick={handleClick}/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4" onClick={handleClick}>
<div class="gallery-item">
<a href={img2}>
<img src={img2} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img3} class="galelry-lightbox">
<img src={img3} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img4} class="galelry-lightbox">
<img src={img4} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img5} class="galelry-lightbox">
<img src={img5} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img6} class="galelry-lightbox">
<img src={img6} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img7} class="galelry-lightbox">
<img src={img7} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img8} class="galelry-lightbox">
<img src={img8} alt="" class="img-fluid"/>
</a>
</div>
</div>
</div>
</div>
</section>
);
}
I was using react. When I click on image, it expand and I want to display two arrows to navigate between images. How to do create that arrows to navigate between arrows?
You can use
lightbox.nextSlide();
lightbox.prevSlide();
Add your buttons, and css them to the position you want, and add your icons
const handleNext = (e) => {
e.preventDefault;
lightbox.nextSlide();
}
const handlePrev = (e) => {
e.preventDefault;
lightbox.prevSlide();
}
<a href="#" class="glightbox-prev" onClick={handlePrev}>previous</a>
<a href="#" class="glightbox-next" onClick={handleNext}>next</a>
Related
I have this simple code that shows the thumbnail insted of the main image, but when I want to get back to the main image it doesn´t works
JAVASCRIPT
let showImage = (smallImg) => {
let fullImg = document.getElementById("imageBox");
fullImg.src = smallImg.src;
}
HTML
<aside class="aside_left">
<div class="thumbnail">
<img src="img/skate1.jpg" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate2.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate3.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate4.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate5.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
</aside>
<main>
<div class="main_img">
<img src="img/skate1.jpg" id="imageBox" onclick="showImage(this)" alt="skateboard png">
</div>
</main>
If by "but when I want to get back to the main image it doesn´t works" you mean that you can change to the thumbnails except for the first one then this is because you don't have a onclick on the first thumbnail like you have with the others. And you actually don't need the onclick on the main
<aside class="aside_left">
<div class="thumbnail">
<img src="img/skate1.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate2.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate3.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate4.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
<div class="thumbnail">
<img src="img/skate5.jpg" onclick="showImage(this)" alt="skateboard png">
</div>
</aside>
<main>
<div class="main_img">
<img src="img/skate1.jpg" id="imageBox" alt="skateboard png">
</div>
</main>
This should do the trick.
I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.
Here is my HTML code:
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click", function(e) {
tapas.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Main Courses
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Dessert
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3
Just like you did it with Tapas images and then you can used the function for each respective content
var button1 = document.querySelector('.load-more-button');
var tapas1 = document.querySelectorAll('.show-tapas');
button1.addEventListener("click", function(e) {
tapas1.forEach(b => $(b).toggle());
})
var button2 = document.querySelector('.load-more-button-2');
var tapas2 = document.querySelectorAll('.show-tapas-2');
button2.addEventListener("click", function(e) {
tapas2.forEach(b => $(b).toggle());
})
var button3 = document.querySelector('.load-more-button-3');
var tapas3 = document.querySelectorAll('.show-tapas-3');
button3.addEventListener("click", function(e) {
tapas3.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
.show-tapas-2 {
display: none;
}
.show-tapas-2.showing {
display: block;
}
.show-tapas-3 {
display: none;
}
.show-tapas-3.showing {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-2">
Main Courses
</div>
</div>
</div>
<div class="row show-tapas-2">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-3">
Dessert
</div>
</div>
</div>
<div class="row show-tapas-3">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Using some jquery to do that.
I have some rule in a tag. (attribute img-data-class)
and the row including your image should put your class name.
function toggleImage(elm){
var _this = $(elm);
var _class = _this.attr('img-data-class');
$('.' + _class).toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a>
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a>
</div>
</div>
</div>
<div class="row show-main">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a>
</div>
</div>
</div>
<div class="row show-dessert">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
I am working in an Angular4 application,In this I have a carousel were I show the products and product name and price .Currently I have 6 products (3+3).I have 2 buttons if I clicked on left carousel will show 3 products from left side for right button will show 3 products from right ride.
The problem is when I add a new product carousel generate a new row instead showing like in the line of products.
How to resolve is .
HTML
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>iPhone</span>
<br>
<br>
3433 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname>Indian Spices</span>
<br>
<br>
747 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In stackblitz, there's no button to add a new product. Either you are adding the new product manually or the code is missed from the solution.
If adding manually, possibly you are adding it as a new row instead of another column. Since you are using bootstrap layout, your code divides the screen area in 12 parts, and each image is using 4 parts (sm-12, sm-4 respectively). Now when you add another product, that creates a new row since there's no space remaining in the current row.
To fix this out, rather than giving part by part allocation, give a fixed size to each product card, and then let the whole scroll horizontally.
Or, create another sm-12 row (3rd carousal) and add elements to it. You will be required to create a component hosting 3 products and each left/right button will cycle in the main carousal. Any product addition will go in the empty component and once filled, will create another instance to host the product.
--- pseudo code below, customize with actual values ----
#Component( {} }
export class ProductsContainerComponent {
products: Product[]
// template shows 3 products
}
#Component()
export class ProductCarousalComponent {
carousal: ProductsContainerComponent[]
btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed
addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
{ container = new ProductsContainerComponent(); carousal.push (container); }
// construct your new product here (url, images, text etc)
container.products.push (new Product() );
}
I'm using Blueimp gallery to present some images on my website. There are 8 images divided in two rows. The 5th thumbnail (first image on the second row) seems broken, although I can see it in the carousel presentation.
![thumbnails]:https://drive.google.com/file/d/0ByO6EWQ4CgAUaGwzbXhnWDlBWFU/view?usp=sharing
Here's the code
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/117.jpg" class="thumbnail">
<img src="img/thumbnails/117.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/119.jpg" class="thumbnail">
<img src="img/thumbnails/119.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/120.jpg" class="thumbnail">
<img src="img/thumbnails/120.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/121.jpg" class="thumbnail">
<img src="img/thumbnails/121.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/125.jpg" class="thumbnail">
<img src="img/tumbnails/125.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/128.jpg" class="thumbnail">
<img src="img/thumbnails/128.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/129.jpg" class="thumbnail">
<img src="img/thumbnails/129.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/130.jpg" class="thumbnail">
<img src="img/thumbnails/130.jpg">
</a>
</div>
</div>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
Does anyone have an idea of what can be happening here. Thanks in advance!
You have a typo: change
<img src="img/tumbnails/125.jpg">
to (add the 'h')
<img src="img/thumbnails/125.jpg">
:)