Image Gallery - Slider - javascript

I developed an image gallery. In a main box (large box) I introduce the first image of the array, the rest are arranged horizontally below that image.
Is there a way to get the big box to function as an image slider?
At this point try to apply, however I have some problems :( the secondary images do not appear below the main one, nor is the slider working correctly, when I move to the second image, all the others are loaded.
I chose to use * ngFor to load secondary images, in case I can have an array with indeterminate quantities of images.
DEMO
CODE
<div class="col-md-6">
<div class="drop">
<div class="abc">
<img class="img-fluid Images" [src]="images[0].img" >
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</div>
<!-- -------------------------------SLIDER----------- -->
<div class="col-md-6">
<ngb-carousel *ngIf="images">
<div class="drop">
<div class="abc">
<ng-template ngbSlide>
<img [src]="images[0].img" alt="Random first slide">
</ng-template>
</div>
</div>
<ng-template ngbSlide>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
What I want with the functional slider
I intend that when clicking on the buttons on the slider it will display the secondary images (the images shown below the main image)

you have to use corousel-Api to get change event.
corousel emit slide event when image is change(automatic or via button)
so you have to add an event to corousel change i have added change($event) to (slide) output.
<ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)" >
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" [alt]="">
</div>
<div class="carousel-caption">
<h3>{{imgIdx.head}}</h3>
<p>{{imgIdx.data}}</p>
</div>
</ng-template>
</ngb-carousel>
<div *ngFor="let imgIdx of belowImageData; let i = index" style="width:80px" >
<img class="col-sm" [src]="imgIdx.image" style="width: 100%; height: 100%;">
</div>
then in chnage event i have updated belowImageData array according to image loded in upper corousel.
constructor(){
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(0,1);
}
change(data){
console.log(data.current)
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(data.current, 1);
}
you can also add this line to pause automatic slide
this.carousel.pause();
i have developed a stackblitz for you(without proper css).

Related

Bootstrap Minimum Height for a Div

I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}

Toggle button - show / hide information

Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>
First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...
HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>

Need help in fixing and creating carousel js functions or css styles (Angular 6)

I'm having a problem creating and fixing carousel animations. Most carousels are only in 1 per screen while I need 4 per screen so I'm trying to implement my own carousel.
Current html:
<div class="display-flex m-t-2">
<div [ngClass]="{ 'disabled-button': page === 1, 'cursor-pointer': page > 1}" (click)="prev()">
<i class="material-icons">keyboard_arrow_left</i>
</div>
<div class="display-flex-child width-100">
<div class="m-x-2" *ngFor="let prod of productList">
<div class="display-flex flex-direction">
<div class="text-title">{{prod.title}}</div>
<div>
<img [src]="prod.url" alt="{{prod.title}}" height="200" width="200">
</div>
</div>
</div>
</div>
<div [ngClass]="{ 'justify-content-right disabled-button': !hasNextValues,
'justify-content-right cursor-pointer': hasNextValues}" (click)="next()">
<i class="material-icons">keyboard_arrow_right</i>
</div>
</div>
Image here:
Html code result image
Expected: to be like a carousel that has a delay when clicking next and previous button
Actual: instantly goes to next or previous

in angular 5 how to make splash screen till the child component load all images?

I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load.
What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear.
How and where do I implement this in angular 5?
window.onload = someFunction; // is not working well
page.component.html:
<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
<div class="container d-none d-lg-block">
<img src="assets/images/home/line_with_bird.png" alt="">
<div class="row">
<div class="col-3 ad-paper">
<img src="assets/images/home/paper.png" class="" alt="">
</div>
<div class="col-2">
<img id="arrow-word" src="assets/images/arrow_word.png" alt="">
<img id="ladder" src="assets/images/ladderLong.png" alt="">
</div>
<div class="col-6 offset-1 c2">
<div id="window"></div>
<div class="smicos">
<app-socialmedia style="width: 641px;"></app-socialmedia>
</div>
</div>
</div>
</div>
</div>
page.component.ts
ngOnInit() {
function splash() {
console.log('tttttttttttttttttttttttttttttttttttttttttt');
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
window.onload = splash;
}
Do not hide your splash screen on ngOnInit. Instead do this:
Keep count of images you are showing in controller.
totalImages = 20;
Keep a load handler on each image;
<img (load)='checkAllLoaded()'>
In checkAllLoaded function, check if all images are loaded:
checkAllLoaded() {
this.totalImages = this.totalImages - 1;
if(this.totalImages === 0) {
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
}
Set a div with *ngIf on a property which will turn to true only when the image is loaded.
<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>
DEMO

AngularJS - Using ng-switch in ng-repeat to conditionally apply HTML

I have a paginated list of video thumbnails I want to display in a Bootstrap fluid grid. I'm using a nested ng-repeat to first iterate over each list, for pagination, and an inner ng-repeat to iterate over each video thumbnail in the subarray. The grid is 3x6 so when the inner ng-repeat's index is a multiple of 5 (assuming $index starts at 0), I want to close a fluid row and start a new one.
<div ng-repeat="thumbList in thumbLists">
<div ng-repeat="thumb in thumbList" class="row-fluid">
<div class="span2">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
<!-- ng-switch? -->
</div>
</div>
The lists are populated by a REST service, such that when a user clicks on a 'next' button, a new array list' is pushed onto the 'lists' and an animation will slide over each 3x6 grid. The structure looks like:
$scope.thumbLists = [
[{URL: url, thumbnailURL: thumburl}, ...], // init
[{URL: url, thumbnailURL: thumburl}, ...], // pushed when user clicks 'next'
... etc
];
Everything I have is working properly, I'm just not sure how to conditionally add in the HTML to close a row and start a new one once that row hits 6 since the thumbnails are given in a single array.
For example, where I have the commented ng-switch, could I do something like:
<div ng-switch="$index">
<div ng-switch-when="$index % 6 == 5">
</div>
Using 1.0.8 stable release. Must support IE8.
Temporary solution - removing the left margin for each element that is the first in it's row:
<div ng-repeat="thumbList in thumbLists">
<div class="row-fluid>
<div ng-repeat="thumb in thumbList" class="span2" ng-class="{nomargin: $index % 6 == 0}">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
Would still like to find a solution that where I can conditionally insert/remove HTML, perhaps using a directive.
Would ng-grid work for you? Might save you having to deal with the details.
http://angular-ui.github.io/ng-grid/
This works with ng-switch -- but may need some more tweaking to avoid the extra hidden span markup...
<div ng-repeat="thumb in thumbList">
<span ng-switch="$index % 5">
<div class="row" ng-switch-when="0">
<div class="col-sm-2"><img src="{{thumbList[$index+0].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
</div>
</span>
</div>
http://bootply.com/86985

Categories