I want to do a mobile webpage, which in the middle of the webpage, I will be able to swipe my finger to the left/right and scroll between images there.
a photo to demonstrate:
I wanna be able to swipe between the censored images with my finger.
How do I do such a thing?
Thanks in advance!
You're looking for a cover-flow like thing. This might guide you in the proper direction : http://andrebrov.net/dev/carousel/
Source Link : http://forum.jquery.com/topic/jquery-mobile-carousel-widget
GITHUB Link : https://github.com/andrebrov/jqm.carousel
Here's how the HTML would look like :
<div style="height:460px;width:300px;">
<div id="carousel" class="carousel">
<div id="carousel_scrollpane" class="carousel-content">
<div id="carousel_content" class="carousel-content-scroller"></div>
</div>
<div id="carousel_nav" class="carousel-nav">
<div id="carousel_mid" class="carousel-mid"></div>
</div>
</div>
</div>
Then, the initialisation would go this way :
var carousel = new $.widgets.Carousel({
uuid: "carousel",
args: {
"scrollInterval": 600,
"itemWidth": 290
},
value: [{
"title": "Tron.Legacy",
"image": "images/1.jpg"
}, {
"title": "Yogi Bear",
"image": "images/2.jpg"
}, {
"title": "The Chronicles of Narnia: The Voyage of the Dawn Treader",
"image": "images/3.jpg"
}, {
"title": "The Fighter",
"image": "images/4.jpg"
}, {
"title": "Tangled",
"image": "images/5.jpg"
}]
});
Hope this helps!
Related
I would like to show the preview of the selected image busing Angular, as of now if we click all images are selected, can any one suggest me how to show preview of the selected one and if we select another image previously selected image should be unselect and display new image.
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: 'Escursione alla scoperta degli animali dell\'isola',
price: 160
}
];
HTML:
<div class="image__container" [ngClass]="{ 'selected': selected }">
<img class="image" [src]="item.src">
<div
class="image__description"
(click)="selected = !selected"
>
<div class="image__description--content">
<div class="image__description--price">
{{ item.price }}
</div>
</div>
</div>
Stackblitz
Thanks for the detailed question, You can check the below stackblitz, I needed to just add a parent property that tracks the currently selected row, then emit an event from the child which updates the latest value from the child. Then if the changes do not show up, we can call this.cdr.detectChanges() to trigger change detection manually. Please check the below code and let me know if any questions.
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef,
ViewChildren,
QueryList,
} from '#angular/core';
import { GridItemComponent } from '../grid-item/grid-item.component';
#Component({
selector: 'aer-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GridComponent {
currentlySelected;
#ViewChildren('gridItem') gridItems: QueryList<GridItemComponent>;
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250,
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: "Escursione alla scoperta degli animali dell'isola",
price: 160,
},
{
src: 'https://picsum.photos/250/250/?image=76',
description: 'Gita in bicicletta',
price: 50,
},
{
src: 'https://picsum.photos/250/250/?image=61',
description: "Visita di una delle cittadine dell'isola",
price: 25,
},
{
src: 'https://picsum.photos/250/250/?image=64',
description: 'Gita in motoscafo',
price: 85,
},
{
src: 'https://picsum.photos/250/250/?image=71',
description: 'Biglietto aereo',
price: 500,
},
{
src: 'https://picsum.photos/250/250/?image=65',
description: 'Cocktail sulla spiaggia',
price: 5,
},
];
constructor(private cdr: ChangeDetectorRef) {}
updateCurrentlySelected(value: number) {
this.currentlySelected = value;
this.cdr.markForCheck();
// not needed below line
// this.gridItems.forEach((item) => item.detectChanges());
}
}
html
<section class="grid-container">
<ng-container *ngFor="let image of images; let index = index">
<aer-grid-item
#gridItem
[item]="image"
[index]="index"
[currentlySelected]="currentlySelected"
(emitChange)="updateCurrentlySelected($event)"
></aer-grid-item>
</ng-container>
</section>
<!-- Preview of the selected image-->
<br />
<br />
<section>
*ngIf="images && images[currentlySelected] && images[currentlySelected].src"
Preview:
<img [src]="images[currentlySelected].src" />
stackblitz
Any idea why the onRefresh event is not firing? First time through the table displays properly. But when clicking the refresh button it does not work (event does not fire). I thought this worked before, but I think a new version of bootstrap.min.js may have killed it (or perhaps it is just a coincidence). Any help would be helpful.
HTML:
<table id="stats-view-output4" data-pagination="false" data-show-refresh="true" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-show-header="false" data-show-footer="false">
</table>
Javascript (a button gets u to this function):
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
onRefresh: function (params) {
bpt_pie_chart();
},
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
Well, I gave up and did a brut force solution. Feels like a bug of a conflict somewhere. For anyone stumbling onto this here it is:
HTML:
<div id="toolbar4">
<div class="form-inline" role="form">
<button id="refresh4" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<table id="stats-view-output4" data-pagination="false" data-show-refresh="false" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-toolbar="#toolbar4" data-toolbar-align="right"
data-show-header="true" data-show-footer="false" style="font-size:11px;">
</table>
Javascript:
$(function () {
$('#refresh4').click(function () {
bpt_pie_chart();
});
});
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
I have the following JSON data:
{
"name": "faded",
"artist": "alan walker",
"color": "faded"
},
{
"name": "i love you",
"artist": "omfg",
"color": "143"
},
{
"name": "closer",
"artist": "the chainsmokers",
"color": "c105e2"
},
{
"name": "roses",
"artist": "the chainsmokers",
"color": "205e2"
}
I'm converting hex codes into background-colors, however some of these will not work since colors needs be either a 6-digit (#ffffff) or 3-digit number (#fff).
A solution would be to add 0 before numbers which are 2,4 or 5 digits only, so "205e2" would come out as "#0205e2". I'd also like to apply this JSON data to each div:
<div style="background-color: #000;"> <!-- background-color here -->
<h1 id="name"></h1> <!-- name goes here -->
<h2 id="artist"></h2> <!-- artist goes here -->
<h3 id="hex">#000000</h3><!-- color text goes here -->
<div class="content">
<button>Like</button>
<button>Copy</button>
</div>
What would be the possible way to code this?
Is there a way to define a custom Handlebars helper with Mandrill? Say that I've got an object and the currency is in cents.
"products": [
{
"sku": "hdrPhotos",
"price": 19000,
"title": "Unlimited HDR Photography"
},
{
"sku": "panos",
"price": 2500,
"title": "Panoramas / Virtuals"
},
{
"sku": "fullVideo",
"price": 43000,
"title": "Full Video"
},
{
"sku": "aerialDaytimePhotos",
"price": 17500,
"title": "Aerial Daytime Photography"
},
]
I've got this template:
<!-- BEGIN PRODUCT LOOP // -->
{{#each products}}
<tr class="item">
<td valign="top" class="textContent">
<h4 class="itemName">{{title}}</h4>
<span class="contentSecondary">${{toCurrency price}}</span>
<br/>
<span class="contentSecondary sku"><em>{{sku}}</em></span>
<br/>
</td>
</tr>
{{/each}}
I want to take price, which is in cents, and write a custom helper toCurrency that simply divides it by 100.
Custom helpers are easy enough to do in standard Handlebars, but is it possible with Mandrill's utilization of it?
According to the documentation this isn't possible :
"Use Handlebars regardless of whether you're using templates in Mandrill. We'll cover the basics of Handlebars, helpers implemented specifically for Mandrill, and some deviations from and additions to standard Handlebars."
Reference: https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-Dynamic-Content#using-helpers
There are not even all helpers from handlebar.
I have the following query:
[{
"type": "/tv/tv_series_episode",
"series": "The Simpsons",
"/tv/tv_series_episode/guest_stars": [{
"actor": null
}],
}]
I want to print out a list of guest stars, how do I do such a thing? I tried:
<acre:script>
var query = acre.require("simpsons").query;
var result = acre.freebase.MqlRead(query).result;
</acre:script>
<ul>
<li acre:for="someResult in result">$someResult.actor.name</li>
</ul>
but that's obviously wrong.
I fixed your code: working example.
Your query is nested, but your display code wasn't.
Note how I used console.log(obj) with "View with Console" to examine the query result.
<html>
<head>
<acre:script>
var query = [{
"type": "/tv/tv_series_episode",
"series": "The Simpsons",
"guest_stars": [{
"actor": {
"name":null
}
}],
}];
var result = acre.freebase.mqlread(query).result;
console.log(result);
</acre:script>
</head>
<body>
<ul>
<li acre:for="episode in result">
<div acre:for="star in episode.guest_stars">$star.actor.name</div>
</li>
</ul>
</body>
</html>