A Pen by Andy Lu

Thumbnail
This awesome code was written by alu16, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alu16 ©
  • HTML
  • CSS
  • JavaScript
    
	<div class="main">

			

	</div><!-- end div main -->

/*Downloaded from https://www.codeseek.co/alu16/a-pen-by-andy-lu-Emqdpg */
    html {
  background-color: grey;
}

.slide-holder { 
	position:absolute; 
	width:100%; 
	display:none; 
}
.slide-holder.active { 
	display:block; 
}

.slide { 
/* 	overflow: hidden;  */
	display: flex; 
	align-items: center; 
	width: 375px; 
	height: 600px; 
	margin: 0px auto 50px; 
	background-color: #1C1C1C; 
	position: relative;
}

.slide-image {
  height: 450px;
  width: 375px;
  position: absolute;
  border: 5px solid white;
  z-index: 2;
  box-sizing: border-box;
}

.secondSlide {
  height: 240px;
  width: 200px;
  z-index: 1;
  left: 50%;
  margin: 0px auto;
  transform: translatex(-50%);
  position: absolute;
  box-sizing: border-box;
  border: 5px solid white;
}


/*Downloaded from https://www.codeseek.co/alu16/a-pen-by-andy-lu-Emqdpg */
    data = {
    "id": "LeoModels",
    "config_version": "1.0.0",
    "gametype": "buckets",
    "slides": {
        "image1": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 494,
                "height": 750,
                "left": 2,
                "top": 0,
                "url": "\/images\/LeoModels\/image1-crop1492794683.jpg"
            },
            "url": "\/images\/LeoModels\/toni-garrn.jpg",
            "caption": "Toni Garrn",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>Victoria's Secret model Garnn and DiCaprio dated from 2013 to 2014.<\/p>"
        },
        "image2": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 495,
                "height": 750,
                "left": 2,
                "top": 0,
                "url": "\/images\/LeoModels\/image2-crop1492794725.jpg"
            },
            "url": "\/images\/LeoModels\/kristen-zang.jpg",
            "caption": "Kristen Zang",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>Zang and DiCaprio dated from 1996-1998.<\/p>"
        },
        "image3": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 493,
                "height": 750,
                "left": 3,
                "top": 0,
                "url": "\/images\/LeoModels\/image3-crop1492794846.jpg"
            },
            "url": "\/images\/LeoModels\/kate-moss (1).jpg",
            "caption": "Kate Moss",
            "credit": "Getty",
            "answer": "answer1",
            "explanation": "<p>These two never dated.<\/p>"
        },
        "image4": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 494,
                "height": 749,
                "left": 3,
                "top": 0,
                "url": "\/images\/LeoModels\/image4-crop1492794885.jpg"
            },
            "url": "\/images\/LeoModels\/gisele-bundchen (1).jpg",
            "caption": "Gisele B\u00fcndchen",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>These two dated for five years but broke up in 2005.<\/p>"
        },
        "image5": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 495,
                "height": 750,
                "left": 2,
                "top": 0,
                "url": "\/images\/LeoModels\/image5-crop1492795181.jpg"
            },
            "url": "\/images\/LeoModels\/erin-heatherton.jpg",
            "caption": "Erin Heatherton",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>DiCaprio and the Victoria's Secret model dated for several months in 2012.<\/p>"
        },
        "image6": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 495,
                "height": 750,
                "left": 2,
                "top": 0,
                "url": "\/images\/LeoModels\/image6-crop1492795335.jpg"
            },
            "url": "\/images\/LeoModels\/bijou-phillips.jpg",
            "caption": "Bijou Phillips",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>Bijou and Leo dated in 1998.<\/p>"
        },
        "image7": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 494,
                "height": 748,
                "left": 2,
                "top": 0,
                "url": "\/images\/LeoModels\/image7-crop1492795427.jpg"
            },
            "url": "\/images\/LeoModels\/behati-prinsloo.jpg",
            "caption": "Behati Prinsloo",
            "credit": "Getty",
            "answer": "answer1",
            "explanation": "<p>These two never dated.<\/p>"
        },
        "image8": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 492,
                "height": 750,
                "left": 4,
                "top": 0,
                "url": "\/images\/LeoModels\/image8-crop1492795459.jpg"
            },
            "url": "\/images\/LeoModels\/bar-rafaeli.jpg",
            "caption": "Bar Refaeli",
            "credit": "Getty",
            "answer": "answer2",
            "explanation": "<p>These two dated on and off from 2005 to 2011.<\/p>"
        },
        "image9": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 491,
                "height": 750,
                "left": 3,
                "top": 0,
                "url": "\/images\/LeoModels\/image9-crop1492795584.jpg"
            },
            "url": "\/images\/LeoModels\/anne-vyalitsyna.jpg",
            "caption": "Anne Vyalitsyna",
            "answer": "answer2",
            "credit": "Getty",
            "explanation": "<p>Leo and the Victoria's Secret model dated in 2009.<\/p>"
        },
        "image10": {
            "width": 500,
            "height": 750,
            "crop": {
                "width": 494,
                "height": 750,
                "left": 3,
                "top": 0,
                "url": "\/images\/LeoModels\/image10-crop1492796498.jpg"
            },
            "url": "\/images\/LeoModels\/adriana-lima (1).jpg",
            "caption": "Adriana Lima",
            "credit": "Getty",
            "answer": "answer1",
            "explanation": "<p>These two did not date.<\/p>"
        }
    },
    "idchange": false,
    "answers": {
        "answer1": {
            "caption": "Never Dated Leo"
        },
        "answer2": {
            "caption": "Dated Leo"
        }
    },
    "instructions": "Drag the models RIGHT if they dated Leo and LEFT if they haven't.",
    "settings": {
        "randomizeorder": "yes",
        "slideduration": 8,
        "difficulty": "none"
    },
    "brand": "cosmopolitan",
    "challenge": "Has Leonardo DiCaprio dated these models?",
    "last-updated": 1496240614,
    "promoimage": {
        "width": 1000,
        "height": 592,
        "crop": {
            "width": 888,
            "height": 592,
            "left": 56,
            "top": 0,
            "url": "\/images\/LeoModels\/game-promo-image-crop1492796622.jpg"
        },
        "url": "\/images\/LeoModels\/leo-girl-promo.jpg",
        "smallcrop": {
            "url": "\/images\/LeoModels\/small-promo-image-crop1492796622.jpg"
        }
    },
    "promo-credit": "Getty",
    "promo-title": "Leo's Ladies: Have these women dated Leonardo DiCaprio?",
    "promo-dek": "Clearly Leo has a type.",
    "promo-tags": "leonardo dicaprio, dating, celebrities, models, buckets, evergreen",
    "promocategory": "entertainment",
    "achievements": [],
    "show-in-feed": "yes",
    "published": 1496240614
}

var test = data;

for (var key in data["slides"]) {
  var o = '';
  o += '<div class="slide-holder '+key+'">';
		o += '<div class="slide">';
      o += '<div class="slide-image" style="background-image:url(\'http://hearst-challenge-prod.s3-website-us-east-1.amazonaws.com'+data["slides"][key]["url"]+'\')"></div>';
      o += '<div class="secondSlide" style="background-image:url(\'http://hearst-challenge-prod.s3-website-us-east-1.amazonaws.com'+data["slides"][key]["url"]+'\')"></div>';
    o += '</div>';
  o += '</div>';
  
  $( ".main" ).append(o);
}

activateSlide("image1");

// var elems = $('.slide-image');
// 		for (var i = 1; i < elems.length+1; i++) {
//       Draggable.create(".slide-image", {type:"x,y", edgeResistance:0.65, bounds:"body"});
//     }

function activateSlide(slide) {
  console.log("activateSlide");
  //console.log('activateSlide: '+slide);
  $("."+slide).addClass("active");
  Draggable.create("."+slide+" .slide-image", {
    type:"x,y", 
    edgeResistance:0.65, 
    bounds:".slide-holder",
    onDrag:function() {
      console.log(this.pointerX);
    }
  })
}

function processSlide() {
  var element = ".slide-holder.image"+G.activeSlide;
  $(element).removeClass("active");	

  // Fade out the next slide
  var nextSlide = G.activeSlide + 1;
  activateSlide("image"+nextSlide);				

  // Increment the active slide
  G.activeSlide++;
  
  if (G.activeSlide > G.totalSlides) {
    setTimeout(function(){
      alert("Thank you! You got "+G.correctAnswers+" out of "+G.totalSlides+" correct! You have now finished the quiz.");
    },500);
  }
}



Comments