I encountered a little problem. I am making a little gallery and saw html like this:
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
</div><br/>
<div class="preview" align="center">
<img name="preview" src="images/img1.jpg" alt=""/>
</div>
And now I wanted to do it repeatedly from json object So I did sth like this:
<div class="mythumbnails">
<img ng-click="mypreview.src=img{{$index}}.src" src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt=""/>
</div><br/>
<div class="mypreview" align="center">
<img name="mypreview" src="data:image/png;base64,{{ data.gallery[0] }}" alt=""/>
</div>
Firstly I did mouseover but I couldn't use {{ $index }}, so I did ng-mouseover and ng-click. I don't know if the expression is wrong or what.
Thanks up front :)
#edit
The problem is when I click the main picture from mypreview doesn't change.
#edit2
In Firebug:
<img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">
So it the index works.
#edit3
At the beginning I got error in console: Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=18&p3=mypreview.src%3Dimg%7B%7B%24index%7D%7D.src&p4=%7B%7B%24index%7D%7D.src
Try to replace
src="data:image/png;base64,{{ data.gallery[0] }}"
to
data-ng-src="data:image/png;base64,{{ data.gallery[0] }}"
If anyone would be interested I did this:
onmouseover="mypreview.src=this.src"
Related
I want to continue ngFor data in a new container div when the length gets to four. I hardcoded the data in several div which seems easier, but now i want to dynamically fetch the data using ngFor to displays the data in several container div
My attempt
<div class="book-section-grid">
<div *ngFor="let book of books" class="book-section-subGrid">
<img src="assets/images/book1-1.png" alt="">
<h4>{{book?.title}}</h4>
<span>by Michael Freeman</span>
</div>
</div>
What i want to achieve
.book-section-grid {
display: flex;
margin-bottom: 100px;
}
<!-- 1st Section -->
<div class="book-section-grid">
<div class="book-section-subGrid">
<img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
</div>
<!-- 2nd Section -->
<div class="book-section-grid">
<div class="book-section-subGrid">
<img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
<div class="book-section-subGrid">
<img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
<h4>Photographer’s trouble shooter</h4>
<span>by Michael Freeman</span>
</div>
</div>
Run c
Take a parent div on the top of the *ngFor div. Put the *ngIf condition.
So it will show only when the length is 4.
Try with this one.
<div class="book-section-grid" *ngIf="books.length === 4">
<div *ngFor="let book of books" class="book-section-subGrid">
<img[src]="book.image" alt="">
<h4>{{book.title}}</h4>
<span>by {{book.name}}</span>
</div>
</div>
I have considered your books object have title, name, and image properties.
Your first sentence is bit confusing.
I want to display my ngFor data in a new container div when the length gets to four
If you want some other solution then please rewrite the first sentence.
In case you don't required new div intentionally you can bind with single div
template.html
<div class="book-section-grid">
<div *ngFor="let book of books" class="book-section-subGrid">
<img [height]="getHeight()" [width]="getWidth()" [src]="book.image" alt="">
<h4>{{book?.title}}</h4>
<span>by {{book?.name}}</span>
</div>
</div>
component.ts
getHeight{
//set custom height based on design or bind in single method
return (this.books.length <=4)? 50 : 100 ;
}
getWidth{
//set custom width based on design
return (this.books.length <=4)? 60 : 110 ;
}
I am trying to change this with iMacros:
<div id="outerd3">
<img src="bnner0.jgp" alt="">
<img src="flamingo.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
into this
<div id="outerd3">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
If possible, please help me to achieve this.
You can use this code for change img src.
$('img').each(function () {
$(this).attr("src","avatar.jpg");
});
And here is a solution for 'iMacros':
URL GOTO=javascript:(function(){var<SP>img=document.querySelector("#outerd3").querySelectorAll("img");for(i=0;i<img.length;i++)img[i].src="avatar.jpg";})();
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
I have a markup like this:
<div class="row">
<div class="col col-50" ng-repeat="picture in pictures.slice().reverse()">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
I'm trying to create an even layout, with two images every row. The issue is, I need to add a new row every two, so my ng-repeat isn't working. For example, the markup should look something like this once it's rendered:
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
Short of doing the output manually with Javascript, I'm not really sure how to do it. I've been looking at the docs, but I can't find a way to do it. Could someone suggest something, or point me in the right direction?
Using ng-switch should work as long as your pictures array is even in length.
<div class="row" ng-repeat="picture in pictures.slice().reverse()" ng-switch on="$index % 2" ng-show="$index%2==1">
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{pictures[$index-1].id}}" title="{{pictures[$index-1].caption.text}}" target="_blank">
<img ng-src="{{pictures[$index-1].images.standard_resolution.url}}" width="100%" height="auto" alt="{{pictures[$index-1].caption.text}}" />
</a>
</div>
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
Simple example of how this works in Fiddle:
http://jsfiddle.net/HB7LU/5711/
I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)