JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a class="prev" href="#">Previous Entry</a> | <a class="next" href="#">Next Entry</a>
  
<div id="myDiv">
   <div class="entry" id="current">
      <span class="number">1</span>
        <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
        <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
        <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
        </span>
      </a>
</div>
</div>
<div id="e1">
<div class="entry">
  <span class="number">1</span>
  <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
    <img...

CSS

#myDiv{border:2px solid red;}

JavaScript

$('#e1').hide();
$('#e2').hide();
$('#e3').hide();
$(".iframe").on("click", function(e) {
  e.preventDefault();
  var $mylink = $(this).attr('href');
  $("#myDiv").load($mylink);
});

$(".prev").on("click", function(e) {
  var currentId=$('#myDiv .number').html();
  if(currentId==1)
  	currentId=3;
  else
  	currentId-=1;
  var prev=$('#e'+currentId).html();
  $('#myDiv .entry').replaceWith(prev);
});

$(".next").on("click", function(e) {
  var currentId=$('#myDiv .number').html();
  if(currentId==3)
  	currentId=1;
  else
  	currentId=parseInt(currentId)+1;
  var next=$('#e'+currentId).html();
  $('#myDiv .entry').replaceWith(next);
 
});