"Display Ads - Dynamic"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="margin-top:40px"> <div class="row"> <div class="col-xs-3 col-xs-offset-4" style="border:1px solid silver;padding:0px;"> <div class="brand"> <img src="https://www.documentree.com/images/yourlogohere.png" alt="Brand" /> </div> <div class="col-xs-12"> <div class="row canvas"></div> </div> </div> </div> </div>
.brand{ width:100%; background:silver; display:flex; align-content: center; max-height: 35px; } .brand > img{ margin-left:5px; max-height:40px; width:auto; } .mylabel{ border-left:1px solid #fafafa; border-bottom:black; border-bottom:1px solid #fafafa; height: 90px; padding: 0; position: relative; cursor:pointer; } .mylabel > a{ color:black; } .mylabel > a > p:first-of-type{ font-size:9px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* number of lines to show */ line-height: 14px; /* fallback */ max-height: 14px; /* fallback */ margin: 0; text-align:center; } .mylabel > a > p:last-of-type{ font-size:12px; overflow: hidden; margin: 0; text-align:center; font-weight: bold; } .discount{ position: absolute; color: white; background: #006666; border-radius: 0; left:5px; top:5px; padding-left:3px; padding-right:3px; }
$(document).ready(function(){ //-- Crear productos dinamicamente var products = []; products.push({"title":"Tablet Samsung Tab SM-T133","price":"156","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/290643-280-280/700391_1.jpg","link":""}); products.push({"title":"Tablet Samsung Galaxy Tab E 96","price":"156","discount":"13","photo":"http://fravega.vteximg.com.br/arquivos/ids/278245-280-280/700270_1.jpg","link":""}); products.push({"title":"Celular Libre Lenovo Vibe K5 Negro","price":"280","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/287959-280-280/780686_1.jpg","link":""}); products.push({"title":"Celular Libre Alcatel IDOL 3","price":"247","discount":"18","photo":"http://fravega.vteximg.com.br/arquivos/ids/284084-280-280/_MG_0204-copy.jpg","link":""}); products.push({"title":"Tablet Eurocase I748 Tabi 7","price":"130","discount":"20","photo":"http://fravega.vteximg.com.br/arquivos/ids/290699-280-280/700393_1.jpg","link":""}); products.push({"title":"Celular Libre Samsung Galaxy A5 2016 Dorado","price":"499","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/284088-280-280/CELULAR-LIBRE-SAMSUNG-GALAXY-A5-2016-DORADO.jpg","link":""}); products.push({"title":"Celular Libre Admiral ADS1 Blanco","price":"187","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/294640-280-280/780607_1.jpg","link":""}); products.push({"title":"Celular Libre Huawei G8 Plateado","price":"550","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/284323-280-280/CELULAR-LIBRE-HUAWEI-G8-PLATEADO.jpg","link":""}); products.push({"title":"Celular Libre Samsung Galaxy J1 MINI White","price":"156","discount":"15","photo":"http://fravega.vteximg.com.br/arquivos/ids/294473-280-280/Celular-Libre-Samsung-Galaxy-J1-MINI-White.jpg","link":""}); function shuffle(a) { for (let i = a.length; i; i--) { let j = Math.floor(Math.random() * i); [a[i - 1], a[j]] = [a[j], a[i - 1]]; } return a; } showProducts(); function showProducts(){ products = shuffle(products); $(".canvas").html(""); //-- Empty //-- Print $.each(products, function(e, data){ if (e < 6){ //-- Check discount if (data.discount === undefined || data.discount <= 0){ var html_discount = ''; var new_price = data.price; }else{ var html_discount = '<span class="label discount">-'+data.discount+'%</span>'; var new_price = parseInt(data.price) - (parseInt(data.price) * parseInt(data.discount) / 100); } //-- Model $(".canvas").append('<div class="col-xs-4 mylabel"><a href="'+data.link+'">' + html_discount + '<div style="height:70%;display:flex;justify-content: center;align-content: center;overflow: hidden">'+ '<img style="height:100%" src="'+data.photo+'" alt="Product"/>'+ '</div>'+ '<p>'+ data.title +'</p>'+ '<p class="price" data-price="US $'+data.price+'" data-newprice="US $'+new_price+'">US $'+new_price+'</p>'+ '</a></div>'); }else{ return false; //-- Finish and exit. } }); setInterval(function(){ changePrice();}, 3500); function changePrice(){ $(".price").each(function(e,index){ if ($(this).text() == $(this).attr("data-newprice")){ $(this).html(' <span style="font-weight:normal;color:gray;text-decoration:line-through;">' + $(this).attr("data-price") + '</span>'); }else{ $(this).html($(this).attr("data-newprice")); } }); } } });

Related: See More


Questions / Comments: