Project Gallery jsFiddle/Github | Chetabahana Project

Product feed in simplyScroll using jsFiddle/Github integration to parse JSON | Chetabahana Project - A Way To Win The Market | GitHub Page

by Chetabahana

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://chetabahana.github.io/scroll/jquery.simplyscroll.css">
<script src="https://chetabahana.github.io/scroll/jquery.simplyscroll.min.js"></script>
<br>
Data Source: <a href='https://github.com/chetabahana/chetabahana.github.io/blob/master/_data/demo.response.json' target='blank'>JSON File at GitHub</a>

<!-- gallery -->
<div class="row">
  <ul id="gallery"></ul>
</div>
<br>

CSS

.row {
    width: 500px;
    height: 100px;
    overflow: hidden;
}

#gallery {
    width: 500px;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    margin-top: 20px;
    overflow: hidden;
}

#gallery li {
    float: left;
    width: 100px;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
}

#gallery img {
    width: 100px;
    height: 100px;
}

JavaScript

jQuery.noConflict();
(function($) {
    $(document).ready(function() {
       $("#gallery").simplyScroll(); 
    });
})(jQuery);


window.addEvent('domready', function() {

var url ='/gh/get/response.json/chetabahana/';
url += 'chetabahana.github.io/tree/master/_data/';
	
  new Request.JSON({
		url: url,
		data: {'delay': 1},
		method: 'post',
		onSuccess: function(json) {

			Object.each(json.gallery, function(produk){
				Object.each(produk.items, function(item){
        	var html = '<img src='+item.src+'>';
        	var el = new Element('li').set('html', html);
    			$('gallery').appendChild(el);
				});
			});
        
		}
	}).send();
})