<div (click)="switchImg($event)" class="containerImgSmall">
<img
[ngStyle]="imgs.img1.zero.style"
id="1"
src="{{ imgs.img1.zero.src }}"
alt=""
/>
<img
[ngStyle]="imgs.img1.one.style"
id="1"
src="{{ imgs.img1.one.src }}"
alt=""
/>
</div>
Is it possible to replicate this div in html in Angular 10 times using ngFor? The index number is needed to fill the id (1,2,3,4..) and also the properties ngStyle and src. For example ngStyle for first img is imgs.img1.zero.style so I would like to replace the "1" with index so the next two for example should be imgs.img2.zero.style imgs.img3.zero.style. So to give full picture second div should look like this
<div (click)="switchImg($event)" class="containerImgSmall">
<img
[ngStyle]="imgs.img2.zero.style"
id="2"
src="{{ imgs.img2.zero.src }}"
alt=""
/>
<img
[ngStyle]="imgs.img2.one.style"
id="2"
src="{{ imgs.img2.one.src }}"
alt=""
/>
</div>
wrap div with ng-container
<ng-container *ngFor="let index of indexes>
*your div here*
</ng-container>
where indexes is array of numbers (1, 2, 3, 4...10) and then use the index as you want
but it would be better if you have array of objects and inside objects you would have style, src and all the other property which you want for image
like so:
[
{
style: '',
src: ''
},
{
style: '',
src: ''
}
]
also if you are using property as a img src, insted of this:
src="{{ imgs.img1.zero.src }}"
you can use it like this:
[src]="imgs.img1.zero.src"
Related
i faced an issue. I have an array of "Lessons" in which i have stored 5 objects. Each of them have parameter (url). Example:
Lessons: [
{
url: "../assets/Math.png",
Title: "Lesson",
Subject: "Math",
Location: "London",
Price: "£100",
Spaces: 5,
},
Now i did v-for to display each of them, everything is working except i dont know how to show the image i have in the /assets folder. i have tried simple way img src=" {{ lesson.url }}" and this one:
<div class="col-md-6 col-lg-3" v-for="lesson in Lessons" :key="lesson.id">
<div class="card" >
<img src="'${lesson.url}'" alt="" class="card-img-top img-fluid">
can anyone suggest me how to do it?
To use image routes in this way you must first import them for Webpack to be able to process them from the data:
import mathImg from "../assets/Math.png"
// in your data
Lessons: [
{
url: mathImg, // use the import name
Title: "Lesson",
Subject: "Math",
Location: "London",
Price: "£100",
Spaces: 5,
}
]
in your template
<img :src="Lessons.url" />
I believe you want to bind the src attribute like so:
<img :src="lesson.url" ...>
I guess you forgot the :
<img :src="`${lesson.url}`" alt="" class="card-img-top img-fluid">
and you also can
<img :src="lesson.url" alt="" class="card-img-top img-fluid">
I'm currently using Flask for my back-end coding, and working on my front-end as of now. Below are the images uploaded on the server. Now I need to edit those images, like I need to upload another image or change the existing image. We're using a cropper.js on this one, and I don't know how will I manage this one because I'm not that good when it comes to front-end scripting like javascript/jquery/ajax. Maximum images can upload is up to 8 images, I need to count the total existing images, then add another img src file, for example if I had 3 images, then I need to show 5 more img src file for adding new images. Any help will do and will be appreciated. Below is my code on HTML with Jinja2 template.
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ resource.image_url }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<span class="rs-cover">Cover</span>
</div>
</label>
</div>
{% for imgs in resource.images[1:] %}
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ imgs.image }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<!-- <span class="rs-cover">Cover</span> -->
</div>
</label>
</div>
{% endfor %}
Image for Edit Module on front-end
Html + JQuery solution, mostly tested so should work.
HTML
<div class="imgBox">
<!-- Your content will appear here -->
</div>
JQuery
// Get the amount of images on the current page
var amountOfImg = $("img").length;
var amountToCount = 8;
for (var i = 0; i < amountToCount - amountOfImg; i++) {
$(".imgBox").append("<input type='file' name='fileInput' /> <b id='removeImg'>Remove</b>")
}
$("#removeImg").click(function() {
// When the user clicks on the #removeImg text, find the closest "img" element and remove it.
$(this).closest("img").remove();
});
i`m creating a slider so i want to get an element of template array in Django.
my HTML file is:
<div id="sideBar_mostVisited_control">
<a href="">
<p>
{{ mostVisited_names.0 }}
</p>
</a>
<div>
<p>
1
</p>
</div>
<button type="button" id="mostVisited_arrowRight">
<img src="{% static 'icons/base/arrowRight.png' %}" id="mostVisited_arrowRight">
</button>
<button type="button" id="mostVisited_arrowLeft">
<img src="{% static 'icons/base/arrowLeft.png' %}" id="mostVisited_arrowLeft">
</button>
</div>
<div id="sideBar_mostVisited_images">
<div>
{% for image in mostVisited_images %}
<img src="{{ image }}">
{% endfor %}
</div>
</div>
i want to change name when its image changed. my jQuery file is:
var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html("{{ mostVisited_names.index }}");
but index is not recognized in {{ mostVisited_names.index }}.
what can i do?
The problem :
Since the JS file is static, you can't put Django variables into it.
A solution :
A way to resolve this situation is to "store" Django variables needed for your js in your html. Afterward you can grab it and use it in your js script !
Some code :
<script type="text/javascript">
// "store" variables from Django in the body
$('body').data('name_index', {{mostVisited_names.index}});
</script>
Then in your JS, get the value from the datamap:
var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html($('body').data('name_index'));
I'm creating an ecommerce site that has infinite scroll in the catalog page. I want to know how many times each product is show to an user in the screen (impressions). The problem is how to get the new 12 elements that renders every time a user scrolls down to a new page. Than pass their ids to the server and stores their impressions. Is there a way to access the new elements? I checked laravel documentation and I saw nothing about this.
This is my code that renders the products array in the template:
<div class="product-one">
#foreach($products as $product)
<div class="col-md-3 product-left">
<div class="p-one simpleCart_shelfItem">
<a href="{{ route('getprodpage', ['id' => $product->id]) }}">
<img src="{{ $product->image_url1}}" alt="" />
<div class="mask">
<span>Comprar</span>
</div>
</a>
<h4>{{ $product->name }}</h4>
<p><a class="item_add" href="#"><i></i>
<span class=" item_price">
R$ {{$product->price_min}}
</span></a>
</p>
</div>
</div>
#endforeach()
<div class="clearfix"> </div>
</div>
<?php echo $products->render(); ?>
And this is the infinite scroll javascript:
$(function() {
$('.shoes').jscroll({
loadingHtml: '<center><img src="{{ URL::asset('images/loading.gif') }}" alt="Loading" /> </center>',
autoTrigger: true,
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.shoes',
callback: function() {
$('ul.pagination:visible:first').hide();
}
});
});
I believe this question has been asked and answered already.
jQuery: How can I trigger an event when a div comes into view?
This post has an answer to see if an element is in the view port and also another answer for an event for when elements are in the view port.
It may be an issue in the way i'm architecting my application, but i keep running into the need to be able to access the dom element via my items array:
$scope.items = [{"src": src, "url": url, "title": title, "top": 0, "left": -500 }];
Bound to html with:
<div class="block" ty-stacked-block ng-repeat="item in items" ng-style="{ 'top' : item.top+'px', 'left' : item.left+'px' }">
<a href="{{ item.url }}" title="{{ item.title }}">
<img ng-src="{{ item.src }}" alt="{{ item.title }}" />
</a>
<br />
<p>{{ item.title }}</p>
</div>
Basically I have another piece of code that wants to run through $scope.items and make changes to the div's positioning (based on each div's height).
scope.repositionItems = function() {
_.each(scope.items, function(item) {
// TODO get item's height somehow
});
};
I added an id to the div "item-{{ $index }}", so i could fetch it by id from my loop. Doesn't feel very "angular", but it worked!
<div id="item-{{ $index }}" class="block" ty-stacked-block ng-repeat="item in items" ng-style="{ 'top' : item.top+'px', 'left' : item.left+'px' }">
<a href="{{ item.url }}" title="{{ item.title }}">
<img ng-src="{{ item.src }}" alt="{{ item.title }}" />
</a>
<br />
<p>{{ item.title }}</p>
</div>
I am not sure why you have layout attributes in your items list, hopefully you don't have a good reason and this will help. If your intention is to have several element blocks stacked on top of each other each containing a result from items then you should let angular repeat the items and not position them at all yourself. Your style attributes in class='block' should create the desired spacing and layout. I have wrapped your code in a unordered list and changed the div tag to an li tag. You can always retain the div inside the li tag. If you don't want to wrap with a ul then apply float:left in class="block"
<ul>
<li class="block" ng-repeat="item in items">
<a href="{{ item.url }}" title="{{ item.title }}">
<img ng-src="{{ item.src }}" alt="{{ item.title }}" />
</a>
<br />
<p>{{ item.title }}</p>
</li>
</ul>
.block {
background-color:#fff;
width:400px;
padding:10px;
border-radius:8px;
margin:10px;
position: relative;
}