In my application there is a carousel with images that I get from my service. Under the carousel there are 3 buttons that give more information about the image.
These information buttons should replace the bullet indicators for a standard carousel. The buttons get an active class when the corresponding image is displayed so it stands out from the other 2.
Below is my code, I'm using this carousel
<ul rn-carousel>
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button>
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I have no problems getting the info out of my service, it's just the linking part that is giving me problems.
I found the solution after searching through the issues page of the carousel I'm using.
<ul rn-carousel rn-carousel-index="currentSlide">
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button ng-class="{activeBtn: $index==$parent.currentSlide}" ng-click="$parent.currentSlide = $index">
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I had to name my carousel-index and for my indicators I had to refer to the parent element for the binding to work.
Thanks to Capricorn for leading the way.
Related
I'm trying to display up to three related articles at the bottom of a blog post using Hugo.
I have some test code where I get data for front matter fields like Title and Summary, but I can't access Image.
Not sure what I am doing wrong
{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<div class="related-content">
<h2>Related content</h2>
<ul class="article-gallery">
{{ range . }}
<li>
<div class="card">
<a class="button" href="{{ .RelPermalink }}">
<img src="" alt ="">
</a>
<div>
<h3>{{ .Title }}</h3>
</div>
<pre>
{{.RelPermalink}}
{{.Title}}
{{.Summary}}
{{.}}
{{.ReadingTime}}
</pre>
<!-- Cannot Access Image -->
<pre>
{{.Image}}
</pre>
</div>
</li>
{{ end }}
</ul>
</div>
{{ end }}
Custom, user-defined data elements in a page's front matter needs to be accessed through .Params:
{{ .Params.Image }}
See The Hugo Docs
Note: there is a predfined "images" (with an 's') that can be accessed directly. Did you mean to use that instead?
I have this code:
<main class="gallery">
<nav class="gallery-list-thumbs">
<ul>
<li ng-click="showLarge($event); modalShow()" ng-repeat="photo in photos | filter:{'section': section }">
<img data-ref="ref-{{ photo.id }}" data-orientation="{{ photo.orientation }}" class="photo-small" ng-src="photos/{{ photo.section }}/th/{{ photo.src }}">
</li>
</ul>
</nav>
<section class="gallery-item" ng-hide="modalHidden">
<h1 ng-model="section">{{ section }}</h1>
<div class="photo-container">
<div class="modal-close" ng-click="modalShow()"></div>
<div class="modal-prev"></div>
<div class="modal-next"></div>
<img data-photoref="ref-{{ photo.id }}" ng-repeat="photo in photos | filter:{'section': section }" class="photo-large below orientation-{{ photo.orientation }}" ng-class="{'above':$first}" ng-src="photos/{{ section }}/{{ photo.src }}">
</div>
</section>
</main>
What I hope to achieve, is to hide the modal-prev when the user click on the first li in gallery-list-thumbs and the same thing with modal-next on the last li.
So far, using $index, it's fairly easy since I can target it by a scope change, but how do I get the last element when there's a different amount of images per galleries? It would be easier if the next and prev arrows were inside the ng-repeat since I could use $first and $last, but I don't want to have to include them in.
OK, I was able to find it by myself.
The solution was to change a scope on $first and last and then add a ng-show and ng-hide depending on the scope value.
Here's the code if anyone has this kind of issue:
<main class="gallery">
<nav class="gallery-list-thumbs">
<ul>
<li ng-click="showLarge($event); modalShow();setPosition('inbetween'); $first && setPosition('first') ; $last && setPosition('last')" ng-repeat="photo in photos | filter:{'section': section }">
<img data-ref="ref-{{ photo.id }}" data-orientation="{{ photo.orientation }}" class="photo-small" ng-src="photos/{{ photo.section }}/th/{{ photo.src }}">
</li>
</ul>
</nav>
<section class="gallery-item" ng-hide="modalHidden">
<h1 ng-model="section">{{ section }}</h1>
<div class="photo-container">
<div class="modal-close" ng-click="modalShow()"></div>
<div class="modal-prev" ng-hide="currentOrder == 'first';">{{ currentOrder }}</div>
<div class="modal-next" ng-hide="currentOrder == 'last';">{{ currentOrder }}</div>
<img data-photoref="ref-{{ photo.id }}" ng-repeat="photo in photos | filter:{'section': section }" class="photo-large below orientation-{{ photo.orientation }}" ng-class="{'above':$first}" ng-src="photos/{{ section }}/{{ photo.src }}">
</div>
</section>
</main>
I have followed list of objects where I represent image + text.
Demo in PLUNKER
My goal is to set height of Item that equal to its width.
How can I achieve that?
Here is snippets of code:
<div class="list">
<a ng-repeat="pet in pets" class="item item-thumbnail-left">
<img ng-src="{{ pet.image }}">
<h2>{{ pet.album }}</h2>
<h4>{{ pet.artist }}</h4>
</a>
</div>
Comment
I use Ionic with Cordova but it doesn't refer to issue.
Thanks,
I'm in the middle of learning Angular, and I am attempting to show or hide contents in a content div depending on side menu items being clicked.
<div id="side-menu">
<h3>Side Menu</h3>
<div ng-repeat="item in example">
<p ng-click="collapsed=!collapsed">
API Name: {{ item.name }}
</p>
</div>
</div>
<div id="content">
<h3>Content</h3>
<!-- What do I have to add here to "connect" to "item in example"? -->
<div ng-show="collapsed">
<p>Debug: {{ item.debug }}</p>
<p>Window: {{ item.window }}</p>
</div>
</div>
What do I have to add to controller ng-show from the other div?
Use $parent:
ng-click="$parent.collapsed=!$parent.collapsed"
Example: http://jsfiddle.net/cherniv/6vhH3/
Read this to understand the most important basics of Angular' scopes.
I've a ng repeater and I defined a list item template for an article list page:
<ul class="article_list">
<li ng-repeat="article in articles | filter:search">
<a href="#" title="article title here">
<span class="date">
<span class="month">{{ article.dt_month }}</span>
<span class="day">{{ article.dt_day }}</span>
<span class="year">{{ article.dt_year }}</span>
</span>
<img src="images/news/{{ article.id }}.jpg" alt="{{ article.title }}" class="thumb" />
<div class="summary">
<span class="article_title">{{ article.title }}</span>
<span class="short">{{ article.content }}...</span>
</div>
</a>
</li>
<li ng-show="(articles | filter:search).length==0">No article found</li>
</ul>
When I checked the console I see 404 not found error for the file images/news/{{article.id}}.jpg
How can I prevent this issue?
Thanks
Use ng-src instead of src for image resources. That way the browser will load it when model data is available.