A Pen by Nikita Zubarets

Developer
Nikita Zubarets
Size
3,435 Kb
Views
32,384
  1. A Pen by Nikita Zubarets Previews
  2. A Pen by Nikita Zubarets HTML Codes
  3. A Pen by Nikita Zubarets CSS Codes
  4. A Pen by Nikita Zubarets JS Codes

How do I make an a pen by nikita zubarets?

What is a a pen by nikita zubarets? How do you make a a pen by nikita zubarets? This script and codes were developed by Nikita Zubarets on 12 September 2022, Monday.

A Pen by Nikita Zubarets Previews
IQ Test

A Pen by Nikita Zubarets - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Nikita Zubarets</title> <link rel='stylesheet prefetch' href='http://otzivi.yokelabs.com/assets/application-28f8b860cd17c849f7aa3cafc7cf514b.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- USER SLIDER -->
<div id="user-photo-carousel_1" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <a class="btn btn-primary btn-upload" data-toggle="modal" href="#login-modal" id="login"> <span class="icon-upload icon-white"></span> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/800/800" data-userpic="http://placehold.it/50/dffd/ffff" data-username="Alex"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/500/800" data-userpic="http://placehold.it/50/ffff/dffd" data-username="Alexander"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/533/850" data-userpic="http://placehold.it/50/fd34/00ff" data-username="NikitaZ"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/400/750" data-userpic="http://placehold.it/50/43ds/0000" data-username="MarusiaA"> <img src="http://placehold.it/110" alt="" /> </a> </div> <div class="item"> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/300/700"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/800/633"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/800/553"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/800/433"> <img src="http://placehold.it/110" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placekitten.com/800/233"> <img src="http://placehold.it/110" alt="" /> </a> </div> </div> <a class="carousel-control left" href="#user-photo-carousel_1" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#user-photo-carousel_1" data-slide="next">&rsaquo;</a>
</div>
<!-- FORSQUARE SLIDER -->
<div id="forsquare-photo-carousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/045f/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/450f/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/fdde/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/eedf/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/eafa/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> </div> <div class="item"> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/0ed4/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/45fd/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/32df/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/df34/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/ff00/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> </div> </div> <a class="carousel-control left" href="#forsquare-photo-carousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#forsquare-photo-carousel" data-slide="next">&rsaquo;</a>
</div>
<!-- OTHER SLIDER -->
<div id="other-photo-carousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/045f/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/450f/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/fdde/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/eedf/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/eafa/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> </div> <div class="item"> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/0ed4/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/45fd/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/32df/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/df34/000"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> <a href="#modalLightbox" class="pull-left" data-toggle="modal" data-href="http://placehold.it/800x533/ff00/fff"> <img src="http://placehold.it/110/045f/fff" alt="" /> </a> </div> </div> <a class="carousel-control left" href="#other-photo-carousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#other-photo-carousel" data-slide="next">&rsaquo;</a>
</div>
<div id="modalLightbox" class="modal hide fade"> <div class="modal-body"> <img src="http://placehold.it/800x553" alt="" id="huge" class="huge" /> <a href="" class="arrow prev"></a> <a href="" class="arrow next"></a> </div> <div class="modal-footer"> <div class="comments"> <img src="http://placehold.it/50" alt="" class="pull-left" /> <a href="" class="pull-left">NikitaZ</a> <p class="pull-left grey">опубликовал(а) эту фотографию</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://otzivi.yokelabs.com/assets/application-40c6ad306c61ae386fa7cd76c4511236.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Nikita Zubarets - Script Codes CSS Codes

#modalLightbox { width: 80%;
}
#huge { max-height: 800px;
}
@media screen and (max-height: 870px) and (min-height: 768px) { #huge { max-height: 75%; }
}
@media screen and (max-height: 768px) { #huge { max-height: 65%; }
}

A Pen by Nikita Zubarets - Script Codes JS Codes

function Steper(sliderId) { this.thumbs = $(sliderId); this.lightbox = $("#modalLightbox"); this.modal = { huge: this.lightbox.find(".huge"), arrows: this.lightbox.find(".arrow"), body: this.lightbox.find(".modal-body"), comments: this.lightbox.find(".comments") }; this.user = { pic: this.modal.comments.find("img.pull-left"), name: this.modal.comments.find("a.pull-left") }; this.links = this.thumbs.find("a.pull-left").not("#add-user-photo"); this.length = this.links.size() - 1; this.index = 0; this.action = function(direction) { if(direction === "next") { if(this.index < this.length) { this.index++; this.modal.arrows.filter(".prev").show(); if(this.index === this.length) { this.modal.arrows.filter(".next").hide(); } } } else { this.index--; this.modal.arrows.filter(".next").show(); if(this.index === 0) { this.modal.arrows.filter(".prev").hide(); } } this.modal.huge.attr("src", this.links.eq(this.index).data("href")); this.setInfo( this.links.eq(this.index).data("userpic"), this.links.eq(this.index).data("username") ); }; this.setIndex = function(index){/*set new index of element*/ this.index = index; this.modal.huge.attr("src", this.links.eq(this.index).data("href")); if(this.index === this.length) { this.modal.arrows.filter(".next").hide(); } else { this.modal.arrows.filter(".next").show(); } if(this.index === 0) { this.modal.arrows.filter(".prev").hide(); } else { this.modal.arrows.filter(".prev").show(); } }; this.setInfo = function(userpic, username) { this.user.pic.attr("src", userpic); this.user.name.text(username); }; this.setLinks = function() {/*set click to links*/ var that = this; this.links.on("click", function(e) { that.setIndex( $(that.links).index(this) ); that.setInfo( $(this).data("userpic"), $(this).data("username") ); that.modal.body.data("class", sliderId.replace("#", "").split("-")[0]); }); this.modal.huge.one("load", positioner);//set position for modal on init };
}
$("#modalLightbox").on("click", ".arrow", function(e) { e.preventDefault(); var dataCLS = $("#modalLightbox .modal-body").data("class"); switch(dataCLS) { case("user"): $(this).hasClass("next") ? user.action("next") : user.action("prev"); break; case("forsquare"): $(this).hasClass("next") ? forsquare.action("next") : forsquare.action("prev"); break; case("other"): $(this).hasClass("next") ? other.action("next") : other.action("prev"); break; } $("#huge").load(positioner);
});
var user = new Steper("#user-photo-carousel_1");
user.setLinks();
var forsquare = new Steper("#forsquare-photo-carousel");
forsquare.setLinks();
var other = new Steper("#other-photo-carousel");
other.setLinks();
/*RESIZE*/
$(window).resize(positioner);
function positioner() { $(".modal").css({ marginTop: function(){ return -($(this).height() / 2); }, marginLeft: function(){ return -($(this).width()/2); } }); console.log( $(window).height() );
}
A Pen by Nikita Zubarets - Script Codes
A Pen by Nikita Zubarets - Script Codes
Home Page Home
Developer Nikita Zubarets
Username snapson
Uploaded September 12, 2022
Rating 3
Size 3,435 Kb
Views 32,384
Do you need developer help for A Pen by Nikita Zubarets?

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!

Nikita Zubarets (snapson) Script Codes
Name
Conditional comments
THREE js
Incremental show img per click
JSON from google drive
The hangman game
Tabs for tm us
CSS accordion
Frog jmp
Click handler test
Pace
Create amazing video scripts 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!