How to open fotorama fullscreen by click on any image? - fotorama

5 images displayed and need to open fullscreen fotorama slider with these images:
<div class="img-list">
<img src="img1">
<img src="img2">
<img src="img3">
<img src="img4">
<img src="img5">
</div>


Set data-allowfullscreen to true. Like this.
<div class="img-list" data-allowfullscreen="true">
<img src="img1">
<img src="img2">
<img src="img3">
<img src="img4">
<img src="img5">
</div>

Related

Opening new tab upon clicking image for ReactJS

I'm trying to open a new link (in this case, i've just included a dummy link : facebook.com) on a new tab upon clicking on the hover-img class. But I'm facing some trouble doing it. Below is a snippet of my code, would gladly appreciate the help.
<div className="container">
{data.map((d)=>(
<div className="item">
<img className="background-img" src={d.img} ></img>
<h3>{d.title}</h3>
<img
className="hover-img"
href="www.facebook.com"
src="asset/eye.png"
/>
</div>
))}
</div>

Instead of setting the href attribute, you could open a new window with window.open() on click.
<div className="container">
{data.map((d)=>(
<div className="item">
<img className="background-img" src={d.img} ></img>
<h3>{d.title}</h3>
<img
className="hover-img"
src="asset/eye.png"
alt="eye"
onClick={()=> window.open("https://www.facebook.com", "_blank")}
/>
</div>
))}
</div>

2 dropdowns, connected with each other, ReactJs

I am struggling with one idea and I need help.
I have a dropdown and dropup list and they contain the same 2 images(flags). In dropup list I select 1 flag and I want in other list to automaticlly be selected the remaining flag.
For now I have hard coded images but eventually I want to display them dynamically.
return (
<div className="container">
<div className={isClicked ? "div2" : "div1"}>
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
<div id="switch">
<button onClick={this.toggleBox}>
<img src={iconSwitch} alt="logo" />
</button>{" "}
</div>
<div className={isClicked ? "div1" : "div2"}>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
</div>
I want this to be solved in ReactJS, if anybody have some idea how to solve please let me know.
Br
C

Why i can't see the imag inside tag?

I learn to use angularjs and bootstrap.
And in this templat:
<div class="row small-up-2 medium-up-3 large-up-4 container-fluid">
<div class="column col-lg-3">
<img src="../img/yst.jpg" class="thumbnail logo" alt="YST" />
</div>
</div>
I can't see the image. but when i insert url it work.
the error i get is:
GET http://localhost:63342/startup/img/yst.jpg 404 (Not Found)
What is the problem?

<img src="../img/yst.jpg" class="thumbnail logo" alt="YST" />
fix
<img src="img/yst.jpg" class="thumbnail logo" alt="YST" />

angular-carousel: overflow-x: scroll inside a slide

i'm trying to create a carousel that inside of it will be scrollable div with images.
The problem is that the swipe events conflict with eachother.
Plunker (the images are on slide 2)
My code:
<div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
<li ng-swipe-left="left($event)">slide #1</li>
<li ng-swipe-right="right($event)">slide #2
<div class="horizontal-slide">
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
</div>
</li>
<li>slide #3</li>
</ul>
Thank's alot
Avi

Can't get angular-masonry to work

I've installed angular-masonry and tried to use it with my single-page Bootstrap view. The images from the ng-repeat directive render but only in a single column. I am not able to figure out why and I am not getting any JS errors.
This is my view:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>

Official Docs:
You still need to use masonry-brick either as class name or element attribute on sub-elements in order to register it to the directive.
Don't you need the masonry-brick class or attribute?
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
or
<div masonry-brick ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
Final sample:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>

Resources