"Embed Show Item with list - Dreamovies.tk"
Semantic UI 2.2.10 Snippet by testing223

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="full-parent"> <div class="embed-div"> <a href="https://dreamovies.tk/shows/detail/2" title="See Show"> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image"> DreaMovies </div> <div class="dimmable image"> <img src="https://dreamovies.tk/images/shows/poster_1403.jpg"> <div class="item-title"><span>Arrow</span></div> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> <div class="extra content"> <h5 class="ui header">Temporada 3</h5> <div class="ui relaxed middle aligned animated divided list"> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 1 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 2 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 3 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 4 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 6 </div> </div> </div> </div> </div> </a> </div> <div class="embed-div-horizontal"> <a href="https://dreamovies.tk/shows/detail/2" title="See Show"> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image"> DreaMovies </div> <div class="image"> <div class="cover"> <img src="https://dreamovies.tk/images/shows/poster_1403.jpg"> <div class="item-title"><span>Arrow</span></div> </div> <div class="side-list"> <h5 class="ui header">Temporada 3</h5> <div class="ui relaxed middle aligned animated divided list"> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 1 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 2 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 3 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 4 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 6 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> <div class="item"> <div class="right floated content"> <i class="green unhide icon"></i>107 <i class="heart outline like icon"></i>17 </div> <div class="content"> Episodio 5 </div> </div> </div> </div> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> </div> </a> </div> </div>
.full-parent { margin: auto; width: 830px; } .embed-div{ margin: 10px auto; width: 300px; display: inline-block; } .embed-div a { color: rgba(0,0,0,.87); } .embed-div .ui.card > .image{ max-width: 200px; margin: 0 auto; } .embed-div .ui.relaxed.middle.aligned.animated.divided.list{ max-height: 150px; overflow-y: scroll; } .embed-div .extra.content{ max-height: 200px; } .embed-div .ui.relaxed.middle.aligned.animated.divided.list .item{ padding-top: 10px; padding-bottom: 10px; } /* Embed side */ .embed-div-horizontal { width: 520px; margin: 0 auto; display: inline-block; } .embed-div-horizontal a { color: rgba(0,0,0,.87); } .embed-div-horizontal .ui.card{ width: 520px; } .embed-div-horizontal .embed-div .ui.card > .image{ } .embed-div-horizontal .cover{ position: relative; display: inline-block; width: 200px; } .embed-div-horizontal .cover img { width: 100%; } .embed-div-horizontal .side-list { display: inline-block; width: 315px; padding: 0 10px; } .embed-div-horizontal .ui.relaxed.middle.aligned.animated.divided.list .item{ padding-top: 10px; padding-bottom: 10px; } /* Default */ .ui.avatar.image{ background-image: url('data:image/jpeg;base64,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'); background-size: contain; } /* Item Base */ .item-title { position: absolute; bottom: 0; width: 100%; height: 70%; vertical-align: bottom; color: #fff; background: rgba(0,0,0,0.5); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8) 59%, rgba(0,0,0,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(59%, rgba(0,0,0,0.8)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8) 59%, rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8) 59%, rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8) 59%, rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8) 59%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 ); } .item-title span { font-size: 13px; font-weight: 400; display: block; position: absolute; bottom: 0; width: 100%; padding: 10px; }
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la) * Dual licensed under the MIT (https://www.opensource.org/licenses/mit-license.php) * and GPL (https://www.opensource.org/licenses/gpl-license.php) licenses. * * Version: 1.3.7 * */ (function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event; var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,e,f){k=!1;var g=d,h=b.outerHeight()-c.outerHeight();e&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),h),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight()); g=l*(b[0].scrollHeight-b.outerHeight());f&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),h),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();q()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0, !0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function q(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var p=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height", h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)p=parseInt(a.scrollTo);else if("scrollBy"in f)p+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(p,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;p=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden", width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius, WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(p);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;q();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll", function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){q()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();q()},function(){r=!1;q()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)}); x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery); $('.ui.list').slimscroll();

Related: See More


Questions / Comments: