JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="banner">Some text in banner<br>on another line</div>

JavaScript

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "/echo/xml/",
      data:{xml:'<?xml version="1.0" encoding="utf-8" ?>\
<images>\
    <img>test1</img>\
    <img>test2</img>\
    <img>test3</img>\
            </images>'},
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {console.log(xml);
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}