<div className="col-lg-3 col-md-3">
<li>
<img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" />
</li>
</div>
In my project I am importing an image and on the onclick I want the image to take them to a URL. How can I get this done?
You can use a tag:
<li><a href='https://arizonaatwork.com'><img src='https://i.imgur.com/fe0T4nw.png'/></a></li>
Working example:
You need to add "a" tag before image
<div className="col-lg-3 col-md-3">
<li>
<img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" />
</li>
Related
I am working on a website that uses Zurbs foundation js, sorry but I am not a fan of this framework but I am stuck with it on this.
Question.
I have tried several times to either add in the orbit or on a containing div the class show-for-small-only but when I go to mobile view only the Arrow show, I have to refresh the page to see the orbit-container. I just used a normal orbit, here is a sample.
Is this typical of Orbits or am I missing something?
<div class="columns small-12 medium-10 text-center small-centered show-for-small-only">
<div class="orbit" role="region" aria-label="Test Orbit" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<div class="icon">
<img src="assets/img/people.png">
<p>
Human-safe<br />
Pet-safe
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/beaker.png">
<p>
Clean without chemicals
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/hearthand.png">
<p>
Leaves no toxic residue
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/earth.png">
<p>
Creates less waste
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/gear.png">
<p>
Anti-bacterial self-cleaning
</p>
</div>
</li>
</ul>
</div>
</div>
I want to convert a complex div container done by a web designer in pure HTML into a React component. This div container has states for React to manage. I know I can convert the div to JSX but that would mean double work for both designer and myself. dangerouslySetInnerHTML doesn't handle states. The idea is that I can create subclass of React.Component, define states and render the state values into the div container without using JSX?
Here's a snippet of the div container markup:
<div id="activities_panel" class="panel">
<div class="panel-body nav-tabs-animate nav-tabs-horizontal" data-plugin="tabs">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item" role="presentation">
<a aria-controls="activities" class="active nav-link" data-toggle="tab" href="#activities" role="tab">Activities <span class="tag tag-pill tag-danger">5</span></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active animation-slide-left" id="activities" role="tabpanel">
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a class="avatar" href="javascript:void(0)"><img alt="..." class="img-fluid" src="avatar1.jpg"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Avatar 1 <span>posted an updated</span></h4><small>active 14 minutes ago</small>
<div class="profile-brief">
“Test test”
</div>
</div>
</div>
</li>
</ul>
<a class="btn btn-block btn-default profile-readMore" href="javascript:void(0)" role="button">Show more</a>
</div>
</div>
</div>
</div>
A few tips to convert your big div into React component:
I can see you can create at least three components: <activities-panel> as the container, <nav-tabs> and <tab-content> as children. Of course, you can create more sub-level components if you wish which makes the maintenance easier.
Change all class to className
You can either store the state variable in the container and passed them down via context API or simply use props. So the container <activities-panel> will manage the state of the component.
Don't use dangerouslySetInnerHTML if possible.
Use <button> for buttons and <a> for links so it is more accessible.
I was trying to adapt this example to my angular project. Here is a Plunkr link for my own adaptation, and the important code itself here:
I have no idea what am I missing or mistyped... Any help would be appreciated since it's already a week I am facing this issue and can't figure it out.
<div id="page">
<header id="landing" class="header">
<div class="medium-4 small-centered text-center columns">
<h4 class="text-center">Expand your dimensions</h4>
<a class="">Scroll to content</a>
</div>
</header>
<div data-sticky-container id="navigation">
<div data-sticky data-margin-top='0' data-top-anchor="landing:bottom" data-btm-anchor="page:bottom">
<div class="top-bar">
<div class="top-bar-left">
<a href="#">
<img src="http://placehold.it/150x38" alt="" />
</a>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About me</li>
<li>Portfolio</li>
<li>Get in touch</li>
</ul>
</div>
</div>
</div>
</div>
<br />
</div>
Thanks in advance.
I'm trying to convert a string which contains an expression passed through an attribute, inside the own directive's template. The idea is to do something like this:
<div custom-directive images-source="'staticpath/blah/blah/{{Item.Src}}'"></div>
And, then inside the template, I would have a ngRepeat directive that would iterate thorugh a data set like this:
<ul>
<li ng-repeat="Item in Items">
<img ng-src="{{imagesSource}}{{Item.name}}.{{Item.extension}}" />
</li>
</ul>
The expected result should be something like this:
<ul>
<li ng-repeat="Item in Items">
<img ng-src="staticpath/blah/blah/src1/file1.jpg" />
<img ng-src="staticpath/blah/blah/src2/file2.jpg" />
<img ng-src="staticpath/blah/blah/src3/file3.jpg" />
<img ng-src="staticpath/blah/blah/src4/file4.jpg" />
</li>
</ul>
I tried to invoke $interpolate and $compile directly in my template but I get an empty string.
{{$interpolate(imagesSource)}} and {{$compile(imagesSource)}}
Any ideas?
EDIT:
Imagine the next scenario. We have a directive that will show a list of image galleries. Each image gallery will have: a title, a little description and from 1 to n images.
Ok, let's say we have a constant with the root to the images folder '/media/images/galleries/'. Then, inside the template, when on the ngRepeat loop, I will need to build the path using that constant and one of the properties (in this case we can name it 'subfolder'), but I don't want the own directive to decide which property is needed. (that's why I'd like to pass the expression in the attribute).
The directive:
<div image-galeries images-source="'staticpath/blah/blah/{{Gallery.subfolder}}'">
The template:
<div ng-repeat="Gallery in Galleries">
<h3>{{Gallery.title}}</h3>
<p>{{Gallery.description}}</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="{{imagesSource}}{{Image.name}}.{{Image.extension}}" />
</li>
</ul>
</div>
And the result:
<div ng-repeat="Gallery in Galleries">
<h3>Gallery 1</h3>
<p>Gallery description 1</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="staticpath/blah/blah/src1/file1.jpg" />
<img ng-src="staticpath/blah/blah/src1/file2.jpg" />
<img ng-src="staticpath/blah/blah/src1/file3.jpg" />
<img ng-src="staticpath/blah/blah/src1/file4.jpg" />
</li>
</ul>
</div>
<div ng-repeat="Gallery in Galleries">
<h3>Gallery 2</h3>
<p>Gallery description 2</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="staticpath/blah/blah/src2/file1.jpg" />
<img ng-src="staticpath/blah/blah/src2/file2.jpg" />
</li>
</ul>
</div>
Excuse me please, about my english, I hope it was clear enough :D
I'm trying to implement carousel by using angular-carousel plugin and nothing works, just empty screen.
This is my html code:
<body ng-app="carouselApp">
<div ng-controller="carouselController">
<ul rn-carousel>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/1860644/294403301/stock-photo-soup-vegetable-soup-bowl-294403301.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/511399/210391630/stock-photo-grilled-chicken-breast-with-fresh-vegetables-selective-focus-210391630.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/522076/266014253/stock-photo-fried-fish-fillet-atlantic-cod-with-rosemary-in-pan-266014253.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/502972/264191042/stock-photo-bowl-of-healthy-fresh-fruit-salad-on-wooden-background-top-view-264191042.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/356269/162416498/stock-photo-closeup-of-fried-rosemary-potato-wedges-in-a-rustic-setting-162416498.jpg">
</li>
</ul>
</div>
</body>
Application and controller code:
var app = angular.module('carouselApp',['angular-carousel']);
app.controller('carouselController', function($scope) {
});
jsFiddle example: https://jsfiddle.net/anatoly314/n0qfj4dk/6/
plunker example: http://plnkr.co/edit/ERDtcVNdKSVTcqtH2XOT?p=info
I'm using angularjs 1.4.5 and angular-carousel 0.3.13, what am I doing wrong?
it's something wrong with your styles, if you add an 'id' to :
<ul rn-carousel id="theCarousel">
and in you css:
#theCarousel{
height:400px;
}
your carousel will work!
I will recommend you to use carousel from this page, never have any problem with it.