I'm working with Ionic and Angular. I have a repeat within a repeat, like below. It outputs a main (large) image, and multiple extra's (smaller) images below it.
<div class="list card" ng-model="tweet" ng-repeat="text in tweet">
<div class="item item-avatar">
<img ng-src="{{text.profileImage}}">
<h2>#{{text.screen_name}}</h2>
<p>{{correctTimestring(text.timeAt) | date:'medium'}}</p>
</div>
<div class="item item-body">
<img src="{{ newImage || text.image[0].imageurl }}" class="full-image">
<div ng-model="image" ng-repeat="data in text.image">
<div class="item item-avatar">
<img src="{{data.imageurl}}" class="miniImage">
</div>
</div>
<p>
{{text.text}}
</p>
<p>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-social-twitter-outline"></i> Open Link
</a>
</p>
</div>
</div>
Which pulls and creates multiple tiles like so:
I would like to be able to click on the lower (smaller photos) to replace the top image, to "scroll through them".
How can I achieve this with Angular, updating the $scope.newImage just replaces all the images. How can I just replace the main image above the smaller images below it?
Any help is appreciated.
Cheers
Try adding a new property: "$scope.selectedImage" and a function that allow you select the image (setSelectedImage). So:
Change this:
<img src="{{ newImage || text.image[0].imageurl }}" class="full-image">
with:
<img src="{{ newImage || selectedImage.imageurl }}" class="full-image">
and add ng-click here:
<div class="item item-avatar">
<img src="{{data.imageurl}}" class="miniImage" ng-click="setSelectedImage(data)">
</div>
In your controller:
$scope.selectedImage;
$scope.setSelectedImage(data){
// Always one image is selected
$scope.selectedImage = data;
}
Related
I am using baguetteBox.js in a website in two different pages:
homepage
gallery
In the gallery it works well but in the homepage I can't find why the lightbox controls (i.e.:id="baguetteBox-overlay") are appearing at the bottom of the webpage like this:
In both webpages, I am loading the same assets, and console does not show any errors.
You can see it live at:
homepage: http://keraban.marcanuy.com <- the one with the problem
gallery: http://keraban.marcanuy.com/gallery/
Using _baguettebox.js/1.10.0 (with Bootstrap 4 too)
Any idea how to fix it?
Relevant code:
In homepage,
<section class="gallery-block compact-gallery">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image5.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 5</span>
</span>
</a>
</div>
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image1.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 1</span>
</span>
</a>
</div>
....
</div>
</div>
</section>
Loading js at bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', {
animation: 'slideIn',
});
</script>
The base stylesheet was missing and caused the dialog to appear, adding the proper style sheet fixes it <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />.
I building a website, and I am not good in js or jQuery. I have no idea what to do. I was in search for couple days, to find any library that support this feature. However, there are different libraries I found, but most of them are separate from what I need, zoom and thumbnails. It has to be similar to Amazon or eBay product listing slider.
Can any one give me a clue where should I start?
PS. I tried swiper.js, but it has zoom only on double click.
Updated 5/16/2017
Example
Hi first of all visit to the link http://www.landmarkmlp.com/js-plugin/owl.carousel/ and download slider.
open your header of the website theme and put the js and CSS which one mentions into the snippet below, and replace the images, js and css files path which where it is.
After that put the HTML sections where you would like to show your slider, and replace the div with your dynamic products loop code.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
Hope so it will work for you. You just need to update files path according where it is situated in your website files directories.
we have developed an app that displays all the videos in our channel.we first display thumbnails, then we click on the thumbnail,we want only the related video of that thumbnail,not all the videos
Angular Code
$scope.isvideoPlaying = false;
$scope.displayvideo = function(){
$scope.isvideoPlaying = true;
}
html code
<div class="list card" ng-repeat="video in videos | filter:searchBox" >
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
</div>
<div class="item item-image">
<img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying" ng-click="displayvideo()">
<!-- Use 'youtube-video' as an element or attribute. -->
<div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying">
<youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>
</div>
Do this, (I am assuming 'video.id.videoId' is your video object ID)
$scope.isvideoPlaying = {}
$scope.displayvideo = function(id){
$scope.isvideoPlaying[id] = true;
}
And HTML,
<div class="list card" ng-repeat="video in videos | filter:searchBox" >
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
</div>
<div class="item item-image">
<img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying[video.id.videoId]" ng-click="displayvideo(video.id.videoId)">
<!-- Use 'youtube-video' as an element or attribute. -->
<div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying[video.id.videoId]">
<youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>
</div>
I cannot work out how to change the style of a class depending on the status/result of the filter. My code:
<div data-ng-if="search.length >= 3" >
<div data-ng-class="{list:true}" style="margin-top: 30px;">
<a class="item item_recipe" data-ng-repeat="item in items | nonBlankFilter:search | filter:search" data-ng-click="$emit('search.click',item.PK);">
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
What is happening now, is the style "list" is still there which has a background and thus the background is still visible, even when there is no results in the filter.
I hope I have explained myself well.
You can assign your filter results to a intermediary variable and than use that variable to conditionally apply your class:
<div ng-if="search.length >= 3">
<div ng-class="{list: filteredItems.length}" style="margin-top: 30px;">
<a
class="item item_recipe"
ng-repeat="item in filteredItems = (items | nonBlankFilter:search | filter:search)"
ng-click="$emit('search.click',item.PK);"
>
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
</div>
I'm using Stylehatch's 'Photoset-grid.js' and 'view.js'
It seems to work, aside for this fact: When I click on the right-most image in a multi-image row, it opens the left image.
To see what I mean: http://test-theme-one.tumblr.com/
My rendered HTML looks like this (I went to safari and clicked "inspect element", and copied the html for a photoset post on my test blog) I don't understand how it is setup, I though I had it so an anchor would wrap each image in the photoset?
<div class="photoset-grid" data-layout="3" style="width: 100%;" data-width="500">
<a href="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" class="view" rel="60178651810" title="help">
<div class="photoset-row cols-3" style="clear: left;display: block;overflow: hidden;height: 80px;">
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;">
<img src="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;padding-left: 2.5px;">
<img src="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" alt="" style="width: 100%;height: auto;margin-top: -84.5px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-left: 2.5px;">
<img src="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
</div>
</a>
</div>
The problem is that Photoset Grid wasn't really designed for template work. It takes this template:
{block:Photos}
<a href="{PhotoURL-500}" class="view" rel="{PostID}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
{/block:Photos}
And pulls out all <img> tags and duplicates them--one per image in the row. It results in this HTML:
<a class="view" ... >
<div class="photoset-row cols-3" ...>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
</div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>
Now, view.js is using anchors/links to pop open the lightbox. They are basically capturing the click event for the entire grouping. When, in your template, you attempt to wrap the <img> in an <a>, it is pulling out the <img> tag out of the <a> in the template and appending them to the first <a>.
If you're up on jQuery plugin development, the Photoset-grid code, is pretty clearly bugged around line 113 (_setupColumns).
Long story short, you're not going to be able to use view.js lightbox with the Photoset-grid. Unless some kind soul comes along and fixes the plugin.