JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div class="wrapper">
<div class="image-wrapper">
<a class="highslide" href="http://placehold.it/3000.jpg/9932CC/D8BFD8vV/&text=Highslide+JS" onclick="return hs.expand(this)">
<img src="http://placehold.it/3000.jpg/9932CC/D8BFD8vV/&text=Highslide+JS" alt="" style="width: 200px" />
</a>
</div>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh tortor, interdum dignissim est a, ullamcorper mattis lorem? Aenean auctor est vel condimentum mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer iaculis aliquet enim eget convallis. Morbi consectetur libero sit amet libero laoreet placerat eget eu diam. Nullam semper vel turpis ac tristique. Donec vitae tortor odio. Curabitur eget imperdiet augue. Morbi tempus eleifend quam, ut facilisis urna ornare et. Aenean at dui quis ligula pellentesque ornare? Donec sit amet fringilla nibh. Fusce eleifend maximus sodales. Etiam purus sapien, sollicitudin vel nisl ut, blandit ultricies quam.
</p>
<p>Nulla ligula urna; bibendum ac felis vitae, semper fringilla sem. Duis consequat laoreet ipsum vitae gravida. Curabitur nisl leo, luctus nec porta non, mattis in turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc malesuada elit enim, vel semper purus pharetra id. Nunc tempus cursus pulvinar. Maecenas metus risus, molestie vitae metus a, vehicula facilisis ex. Fusce eu velit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur mi ante, hendrerit non lectus non, varius iaculis sapien. Sed sodales non libero id fermentum. Sed placerat, metus nec dictum consectetur, nibh libero mollis dolor, id auctor dui nisl quis lorem. Proin maximus dui congue orci malesuada congue.
</p>
...
CSS
.wrapper {
width: 600px;
margin: 10px auto;
border: 1px solid silver;
padding: 10px;
}
.image-wrapper {
position: relative;
float: right;
margin: 0 0 10px 10px;
}
JavaScript
// automatically open a page in a HTLM popup after page load
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.dimmingOpacity = 0.75;
hs.addEventListener(window, "load", function() {
hs.htmlExpand(null, {
objectType: 'iframe',
src: 'http://service.mngkargo.com.tr/mobile.asp',
wrapperClassName: 'draggable-header'
});
});
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});