Lookbook module

Developer
JasonPark
Size
4,403 Kb
Views
8,096
  1. Lookbook module Previews
  2. Lookbook module HTML Codes
  3. Lookbook module CSS Codes
  4. Lookbook module JS Codes

How do I make an lookbook module?

What is a lookbook module? How do you make a lookbook module? This script and codes were developed by JasonPark on 10 December 2022, Saturday.

Lookbook module Previews
IQ Test

Lookbook module - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>lookbook module</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- @설명 : @params data-image-url : thumbnail 이미지 data-main-link : thumbnail 클릭시의 링크 data-prds-desc : thumbnail 하단에 들어갈 Men/Women에 해당하는 링크가 될 내용 : 여러개 일 경우 ; 로 구분해서 입력 : eg) data-prds-desc="Yardan in Men;Aaron in Women" data-prds-link : prds-desc에 대응하는 링크. : 여러개일 경우 ; 로 구분해서 입력 : eg) data-prds-desc="https://www.yun-berlin/product/men/yardan;https://www.yun-berlin/product/women/aaron" data-facebook-link : facebook icon 링크 data-pinterest-link : pinterest 링크 data-instagram-link : instagram 링크
예시)
<div class="lookbook" data-image-url="//static.zara.net/static//spots/patterns-kids-layout-large//look2-look2.st.jpg?1490451377000" data-main-link="//abc.net/link0" data-prds-desc="Ben;Aaron;Yardan" data-prds-link="//abc.net/link1;//abcnet/link2;//abc.net/link3" data-facebook-link="//facebook.com/abc" data-instagram-link="//instagram.com/abc" data-pinterest-link="//youtube.com/abc">
</div>
템플릿)
<div class="lookbook" data-image-url="" data-main-link="" data-prds-desc="" data-prds-link="" data-facebook-link="" data-instagam-link="" data-pinterest-link=""
</div>
-->
<!--
https://www.zara.com/kr/ko/editorials/kids/kids-%7C-prints-prints-c916004.html
-->
<!-- 여자 꼬맹이 이미지 -->
<!-- <div> <h1>KIDS 짱짱먠</h1> </div> <ul class="lookbook-list"> <li class="item"> <a class="anch" href="#!"> <div class="thumb"> <img src="//static.zara.net/static//spots/patterns-kids-layout-large//look2-look2.st.jpg?1490451377000" alt="" /> </div> <div class="link-wrapper"> <div class="prd-links"> <div class="link-text"><a href="/men">Men</a></div> <div class="link-text"><a href="/women">Women</a></div> </div> <div class="social-links"> <ul> <li class="s-link"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li class="s-link"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> <li class="s-link"><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li> </ul> </div> </div> </a> </li> </ul> --> <ul id="here" class="lookbook-list">
<li class="lookbook item single" data-image-url="http://yun-berlin.com/pub/media/wysiwyg/mainImages/MG-1563_1.jpg" data-main-link="http://yun-berlin.com/ay0-ao03.html?oid=267" data-prds-desc="Men Henry in Sand;Women Paul in Pale pink" data-prds-link="http://yun-berlin.com/cy2-as02.html?oid=271;http://yun-berlin.com/ay0-ao03.html?oid=267" data-facebook-link="http://yun-berlin.com/ed-01-2017#lb_1" data-pinterest-link="a" data-instagram-link="a" id="lb_1"> <a class="anch" href="http://yun-berlin.com/ay0-ao03.html?oid=267"><div class="thumb"><img src="http://yun-berlin.com/pub/media/wysiwyg/mainImages/MG-1563_1.jpg"></div></a><div class="link-wrapper"><div class="prd-links"> <div class="link-text"> <a href="http://yun-berlin.com/cy2-as02.html?oid=271">Men Henry in Sand</a> </div> <div class="link-text"> <a href="http://yun-berlin.com/ay0-ao03.html?oid=267">Women Paul in Pale pink</a> </div></div><div class="social-links"><ul><li onclick="sslink(&quot;facebook&quot;,&quot;http://yun-berlin.com/ed-01-2017#lb_1&quot;,&quot;&quot;,&quot;http://yun-berlin.com/pub/media/wysiwyg/mainImages/MG-1563_1.jpg&quot;);" class="s-link"><i class="fa fa-facebook"></i></li><li onclick="sslink(&quot;instagram&quot;,&quot;a&quot;,&quot;&quot;,&quot;http://yun-berlin.com/pub/media/wysiwyg/mainImages/MG-1563_1.jpg&quot;);" class="s-link"><i class="fa fa-instagram"></i></li><li onclick="sslink(&quot;pinterest&quot;,&quot;a&quot;,&quot;&quot;,&quot;http://yun-berlin.com/pub/media/wysiwyg/mainImages/MG-1563_1.jpg&quot;);" class="s-link"><i class="fa fa-pinterest"></i></li></ul></div></div></li>
</ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://use.fontawesome.com/a3da9fcc12.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lookbook module - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: Roboto, sans-serif; font-weight: 40;
}
body,
p { margin: 0; padding: 0;
}
ul,
li { list-style: none; padding: 0; margin: 0;
}
html,
body { height: 100%;
}
img { vertical-align: top; max-width: 100%;
}
a { color: #000; text-decoration: none;
}
a:focus,
a:hover { color: #000; text-decoration: none;
}
a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
}
.lookbook-list { width:500px;
}
.lookbook-list .item { position: relative;
}
.lookbook-list .anch { display:block; position: relative; width: 100%;
}
.link-wrapper { position: absolute; background-color: white; left: 0; bottom: 0; right:0; height: 30px;
}
.link-wrapper .prd-links,
.link-wrapper .social-links{ position: relative; top:50%; transform:translateY(-55%);
}
.link-wrapper .prd-links { float: left;
}
.link-wrapper .prd-links .link-text { display: inline-block; font-size:13px; padding-left:10px; padding-right:10px;
}
.link-text:hover{ text-decoration:underline;
}
.link-wrapper .social-links { line-height:1.7; float: right; font-size:13px;
}
.link-wrapper .social-links .s-link{ display:inline-block; padding-left:10px; padding-right:10px;
}

Lookbook module - Script Codes JS Codes

(function($, undefined) { var lookboo_id = 1; $.fn.lookbook = function() { return this.each(function() { var $bk = $(this); var lid = lookbook_id++; var img_url = $bk.attr("data-image-url"); var main_link = $bk.attr("data-main-link"); var prd_desc = $bk.attr("data-prds-desc"); var prd_links = $bk.attr("data-prds-link"); var scl_links = [ $bk.attr('data-facebook-link'), $bk.attr('data-pinterest-link'), $bk.attr('data-instagram-link') ]; var data = { img_url: img_url ? img_url : undefined, main_link: main_link ? main_link : undefined, prd_desc: prd_desc ? prd_desc.split(";") : undefined, prd_links: prd_links ? prd_links.split(";") : undefined, scl_links: scl_links }; var $anchorWrap = $('<a></a>') .addClass('anch') .attr('href', data.main_link) var $thumbWrap = $('<div></div>') .addClass('thumb'); $('<img src="" />').appendTo($thumbWrap); var $linkWrap = $('<div></div>') .addClass('link-wrapper') .append(prdLinksWrap(data)) .append(socialLinksWrap(data)); $anchorWrap .append($thumbWrap) $bk .attr("id", "lb_"+lid) .append($anchorWrap) .append($linkWrap); $.ajax({ url: img_url, type:'GET', dataType:'text', success: function(data){ $bk.find(".thumb img").attr("src", img_url); } }) }); function prdLinksWrap(option) { var desc = option.prd_desc; var links = option.prd_links; var linkDOM = ''; if(!desc){ return '<div class="prd-links"></div>';} for (var i = 0; i < desc.length; i++) { var dom = '\ <div class="link-text">\ <a href="' + links[i] + '">' + desc[i] + '</a>\ </div>'; linkDOM += dom; } return '<div class="prd-links">' + linkDOM + '</div>'; } function socialLinksWrap(option) { var slinks = option.scl_links; var img_url = option.img_url; var linksDOM = ''; linksDOM += (slinks[0] ? '<li onclick=\'sslink("facebook","'+slinks[0]+'","","'+img_url+'");\' class="s-link"><i class="fa fa-facebook"></i></li>' : ""); linksDOM += (slinks[1] ? '<li onclick=\'sslink("instagram","'+slinks[1]+'","","'+img_url+'");\' class="s-link"><i class="fa fa-instagram"></i></li>' : ""); linksDOM += (slinks[2] ? '<li onclick=\'sslink("pinterest","'+slinks[2]+'","","'+img_url+'");\' class="s-link"><i class="fa fa-pinterest"></i></li>' : ""); return '<div class="social-links"><ul>' + linksDOM + '</ul></div>'; } } $(function () { $('.lookbook').lookbook(); $('#here').show(); });
});
function sslink(sns, url, txt, img_url)
{ var o; var _url = encodeURIComponent(url); var _txt = encodeURIComponent(txt); var _img_url = encodeURIComponent(img_url) var _br = encodeURIComponent('\r\n'); switch(sns) { case 'facebook': o = { method:'popup', url:'http://www.facebook.com/sharer/sharer.php?u=' + _url + '&picture=' + _img_url }; break; case 'instagram': o = { method:'popup', url: '' + _url }; break; case 'pinterest': o = { method:'popup', url:'' + _url } default: alert('Not allowed SNS.'); return false; } switch(o.method) { case 'popup': window.open(o.url, 'Share, YUN', 'width=420,height=230'); break; default: alert("Not allowed."); return false; }
}
window.sslink = sslink;
Lookbook module - Script Codes
Lookbook module - Script Codes
Home Page Home
Developer JasonPark
Username wooljs
Uploaded December 10, 2022
Rating 3
Size 4,403 Kb
Views 8,096
Do you need developer help for Lookbook module?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

JasonPark (wooljs) Script Codes
Name
YxT
Polar Coordinate - Archimedean spiral
Javascript Queue
A Pen by JasonPark
Digital Calculator
Counter Example 001
Prescription
Main-contents
Appointment DatetimePicker
Popup-modal
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!