How to show small parts of previous and next image in slideshow in AngularJS? The parts of previous and next images should be displayed on desktop and tabet screens, but not on mobile
This is what I already have: http://codepen.io/juliezzz/pen/qZezzx
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
CSS:
#slides_control > div{
height: 200px;
}
img{
margin:auto;
width: 800px;
}
#slides_control {
width: 100%;
}
JavaScript
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
Take a look at https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html
You can modify the template of a carousel by using the templateUrl directive.
<carousel interval="myInterval" template-url="path-to-url">
Related
I start to working with gridstack.js and i want to build layout dynamically from jquery.
But for this i want to provide some layout for boxes, like this:
So i do this, but problem is how i can build, this layout for boxes from script, because now i just add this to html.
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
var grid = GridStack.init();
grid.load(items);
.stantion-box {
display: flex;
}
.stantion-text {
justify-content: right;
}
.image-box {
width: 100%;
height: 100%;
}
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
<link href="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack-h5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />
<div class="container-fluid">
<div class="grid-stack">
<div class="text-center card text-white grid-stack-item newWidget ui-draggable" gs-x="0" gs-y="2" gs-w="3" gs-h="1">
<div class="card-body grid-stack-item-content ui-draggable-handle stantion-box">
<div class="stantion-icon">
<img src="https://www.ccifr.ru/wp-content/themes/ccifr/img/no-image.png" class="image-box"/>
</div>
<div class="stantion-text">
<div class="stantion-title">
<span>Drag me into the dashboard!</span>
</div>
<div class="stantion-descr">
<span>some descr</span>
</div>
</div>
</div>
</div>
</div>
</div>
So i want to build first box on the layout use js, to dynamically boxes build from here
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
How i can defind standart layout for boxes?
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I need to create a function that generates a new instance of a specific div (.container in the template) when a button (#addDiv) is clicked. The button should be the only thing visible on the webpage before that. How do I do?
I know that it may be possible to do this with document.appendChild. Is there a better way?
I am using toggle-function that works great, I have included it in the code to give you the whole picture.
Vue
Vue.component('dynamicdDvs', {
template: `
<div>
<div class="headerDiv">
<button class="addDiv" type="button" v-on:click="createDiv">Create</button>
</div>
<div class="container">
<div class="createdDiv">
<h2>I am dynamic!</h2>
<button class="minimize" v-on:click="expand">Make me smal</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv">
<p>I am a smal version of the created div!</p>
<button class="maximize" v-on:click="expand">Expand me</button>
</div>
</div>
</div>
`,
data:function () {
return {
displayDiv: false
}
},
methods: {
expand: function () {
this.displayDiv = !this.displayDiv;
},
createDiv: function() {
//The function that creates a new div, with the same code as
//.createdDiv and .createDivMinimized may be placed here
}
}
});
CSS
.headerDiv {
height: 100px;
width: 400px;
background-color: blue;
color: white
}
.createdDiv {
height: 300px;
width: 400px;
background-color: black;
color: white
}
.createdDivMinimized {
height: 300px;
width: 400px;
background-color: red;
color: white
}
HTML
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="parent">
<dynamicDivs></dynamicDivs>
</div>
So what you can do is set a number in data for the number of <div> elements and use v-for with a range. For example
data () {
return {
displayDiv: [false],
divs: 1
}
}
And in your template
<template v-for="n in divs">
<div class="createdDiv">
<!-- snip -->
<button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv[n-1]">
<!-- snip -->
</div>
</template>
and in your methods...
createDiv () {
this.divs++
this.displayDiv.push(false)
}
I have a gallery of images. I want to show a loading gif when an image is clicked. I am passing the same onclick function to all the images with their id as below:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading" style="margin-top: -65%; display: none; z-index= 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
This is my js :
function imageClicked(id) {
// alert(id);
document.getElementById("loading").style.display = ""; // to display
//alert(loading);
return true;
}
var FirstLoading = true;
function Restoresmallimage() {
if (FirstLoading) {
FirstLoading = false;
return;
}
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = Restoresmallimage;
For the first image its working fine.
But issue is when I am clicking on second image, gif is running on first image and not on the second one. How to resolve this issue? I had defined loading id in each div image.
I think the problem is you never move imagepreloader.gif. Here is my solution to have only one imagepreloader.gif for all images:
HTML:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
CSS:
div {
display: inline-block;
position: relative;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JavaScript:
function constructImagePreloader() {
'use strict';
var imagePreloader = document.createElement('img');
imagePreloader.setAttribute('src', 'images/imagepreloader.gif');
imagePreloader.setAttribute('alt', 'loading...');
imagePreloader.setAttribute('id', 'loading');
return imagePreloader;
}
function imageClicked(id) {
document.getElementById(id).appendChild(constructImagePreloader());
return true;
}
Tell me if it suits your needs. We could go further with code optimization but I wanted to stay close from your code for now. For instance: we could remove the image preloader from the clicked image if another image is clicked.
Try this if it will work,
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading1" style="margin-top: -65%; display: none; z-index:9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
<div id="loading2" style="margin-top: -65%; display: none; z-index: 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
And your script will be like this;
function imageClicked(id) {
// alert(id);
var loadingId = $(id).replace('smallimage','loading');
document.getElementById(loadingId).style.display = "block"; // to display
//alert(loading);
return true;
}
I am learning windows 8/HTML/JavaScript app creation.
I am trying to create a WinJS.UI.ListView object as described in the MSDN site.
Now I have three listview elements and I want them to be placed on a single row.
I tried used css float:left property to display them in one line.
But the problem is I cant get them in a single line.
This is my screenshot of the output
HTML:
<section aria-label="Main content" role="main">
<div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
<div class="iconTextApplications" >
<img class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
<div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
</div>
</div>
<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource,
itemTemplate: select('#iconTextApplicationsTemplate'),
layout: { type:WinJS.UI.CellSpanningLayout } }" >
CSS
.win-container{
margin:auto;
}
.win-surface {
width:100%;
margin: 0 auto;
}
.win-viewport {
width:100%;
margin: 0 auto;
background-color:rgb(94, 82, 68);
}
#iconTextApplicationsTemplate {
float:left;
width:100%;
height:100%;
}
JavaScript
var dataArray = [
{ title: "One", picture: "images/jokes.png" },
{title : "Two" , picture : "images/quotes.png" },
{ title: "Three", picture: "images/trivia.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);
Am I approaching it in the wrong way?
or Should I go for other techniques?
In WinJS you'll need to define the height as the ListView will automagically wrap if the height is either set to auto or 100%.