Files | (G)I-DLE

17 Juli 2020

by EvanlynnNT

HTML

<div style="position: relative; width: 688px; height: 500px; background: url(https://i.imgur.com/PbTTkFb.jpg)">
    <div class="LS_lookContainer" style="position: absolute; width: 180px; height: 180px; left: 40px; top: 310px;">
        
    </div>
    <div style="position: absolute; width: 418px; height: 170px; left: 230px; top: 315px;">
        <div class="MTB_goForth back" style="position: absolute; left: -220px; top: 50%; cursor: pointer; font-size: 30px; color: #af8754; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%);">
            ◄
        </div>
        <div class="MTB_goForth next" style="position: absolute; right: -30px; top: 50%; cursor: pointer; font-size: 30px; color: #af8754; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%);">
            ►
        </div>

        <div class="textbox 1" style="position: absolute; overflow: auto; height: 170px; width: 100%; text-align: justify; padding-right: 5px; box-sizing: border-box;">
            Op 2 mei 2018 debuteerde de Zuid-Koreaanse meidengroep G(I)-DLE met hun EP I Am, met een muziekvideo van het lied Latata. In hun debuutjaar wonnen ze verschillende rookie awards, waaronder Female Rookie Idol of the Year. Vanuit daar groeide hun carrière alleen maar en met hun unieke muziekstijl worden ze beschouwd als één van de meest succesvolle groepen die niet afkomstig is van een van de drie grootste platenlabels. De groep bestaat uit Soyeon, die tevens de leider is, Minnie, Miyeon, Shuhua, Soojin en Yuqi.<br><br>

            Na hun EP I Am, kwam er in datzelfde jaar op 14 augustus een los lied uit, Hann (Alone). In November kwam het lied Pop/Stars van K/DA uit voor de promotie van het wereldkampioenschap League of Legends. K/DA bestaat uit vier virtuele personages, waarvoor Soyeon en Miyeon van (G)I-DLE, Madison Beer en Jaira Burns hun stem leenden.<br><br>

            In 2019 kwam (G)I-DLE’s comeback op 26 februari met een muziekvideo van het lied Senorita en de daarbij...

CSS

* {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #836136;
}

.LS_looks {
    position: absolute;
    pointer-events: none;
}

.videoButton {
    margin-bottom: 4px;
    width: 120%;
    padding: 2px 0px;
    background: #fff;
    border: 0px;
    outline: 0px;
    border-radius: 0px;
}

.videoButton:hover {
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.videoFloat.left {
  float: left;
}

.videoFloat.right {
  float: right;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
::-webkit-scrollbar-track {
    background: #e6e6e6;
}
 
::-webkit-scrollbar-thumb {
    background: #c7a670;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #af8754;
}

JavaScript

// Image Slideshow
setTimeout( function lookSlideshow() {
const fadeSpeed = 1;
const showLook = 5;
const lookIMG = [
	'https://i.imgur.com/d4F8Lms.jpg', '',
	'https://i.imgur.com/hWw4HiC.jpg', '',
	'https://i.imgur.com/I3DMoOC.jpg', '',
	'https://i.imgur.com/cf2z6AW.jpg', '',
	'https://i.imgur.com/gdTqdSb.jpg', '',
	'https://i.imgur.com/EswUYmO.jpg', ''
];

// DON'T TOUCH, unless you know what you're doing, thanks!
for (i = 0; i < lookIMG.length; i+=2) {
	$('.LS_lookContainer').append('<img class="LS_looks" src="' + lookIMG[i] + '" title="' + lookIMG[i+1] + '">');
}

var nthImage = 1;
var lookAmt = $('.LS_looks').length;
$('.LS_looks').slice(1).hide();

var doLookLoop = setInterval(lookLoop, fadeSpeed * 1000 + showLook * 1000);
function lookLoop() {
	if (lookAmt == 1) {
		return;
	}
	$('.LS_looks:nth-of-type(' + nthImage + ')').fadeToggle(fadeSpeed * 1000);
	if (nthImage >= lookAmt) {
		nthImage = 1;
	} else {
		nthImage++;
	}
	setTimeout(function() {
		$('.LS_looks:nth-of-type(' + nthImage + ')').fadeToggle(fadeSpeed * 1000);
	}, fadeSpeed/2);
}

$('.LS_lookContainer').hover(function() {
	clearInterval(doLookLoop);
}, function(){
	doLookLoop = setInterval(lookLoop, fadeSpeed * 1000 + showLook * 1000);
});

window.addEventListener('load', (event) => {
	var looksHeight = [];
	$('.lookSlideshow').show();
	for (i = 0; i < lookAmt; i++) {
		var addHeight = $('.LS_looks').eq(i).height();
		looksHeight.push(addHeight);
		var highestLook = Math.max.apply(Math, looksHeight);
		$('.LS_lookContainer').css("height", highestLook);
	}
});

}, 0);

// Change Textbox
$( document ).ready(function() {
	$('.textbox').hide();
	$('.textbox.1').show();
	testArrow();
});

function testArrow() {
	var totalPages = $('.textbox').length;
	var arrowBack = $('.textbox.1').css('display');
	var arrowNext = $('.textbox.' + totalPages).css('display');
	if (arrowBack == 'block') {
  	$('.MTB_goForth').show();
  	$('.MTB_goForth.back').hide();
	} else if (arrowNext == 'block') {
 ...