Div Gallery

Developer
Alan Mok | Aki Isamu
Size
4,709 Kb
Views
12,144
  1. Div Gallery Previews
  2. Div Gallery HTML Codes
  3. Div Gallery CSS Codes
  4. Div Gallery JS Codes

How do I make an div gallery?

It turns divs into a gallery. - Allows anything in the div - Auto Generate the controllers - "Preview" previous/next div. What is a div gallery? How do you make a div gallery? This script and codes were developed by Alan Mok | Aki Isamu on 09 December 2022, Friday.

Div Gallery Previews
IQ Test

Div Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Div Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="#" class="divGalleryControl goRight" for="dg1">previous</a>
<a href="#" class="divGalleryControl goLeft" for="dg1">next</a>
<hr/>
<div class="divGallery" id="dg1"> <div class="divGalleryWrap"> <div class=""> <!-- chuunibyou --> <img src="http://placekitten.com/800/400"/> </div> <div> <!-- outbreak company --> <img src="http://placekitten.com/600/300"/> </div> <div> <!-- chuunibyou --> <img src="http://placekitten.com/708/354"/> </div> <div> <!-- chuunibyou --> <img src="http://placekitten.com/700/350"/> </div> <div> <!-- chuunibyou --> <img src="http://placekitten.com/780/390"/> </div> </div> <div class="layer"></div> <div class="divGalleryControls" for="dg1"> <div class="divGalleryControl btn goRight"> <svg style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polygon points="352,128.4 319.7,96 160,256 160,256 160,256 319.7,416 352,383.6 224.7,256 " fill="#5AECF1"/> <!--352,128.4 319.7,96 160,256 160,256 160,256 319.7,416 352,383.6 224.7,256 --> <!--thin--> <!--352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 --> </svg> </div> <div class="divGalleryControl btn goLeft"> <svg style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polygon points="160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 " fill="#5AECF1"/> <!--160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 --> <!--thin--> <!--p160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 --> </svg> </div> <div class="divGalleryControl points"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Div Gallery - Script Codes CSS Codes

html, body { height: 100%; width: 100%; padding: 0; margin: 0;
}
.divGallery { background: #000000; position: relative; display: block; height: 400px; width: 100%;
}
.divGallery .divGalleryWrap { position: absolute; overflow: hidden; height: 100%; bottom: 0; right: 0; left: 0; top: 0;
}
.divGallery .divGalleryWrap .divGalleryInner { position: absolute; width: 100%; bottom: 0; left: 0%; top: 0;
}
.divGallery .divGalleryWrap .divGalleryInner .divGalleryBlock { position: absolute; display: block; width: 100%; bottom: 0; right: 0; left: 0; top: 0;
}
.divGallery .divGalleryWrap .divGalleryInner .divGalleryBlock img { display: block; width: 100%;
}
.divGallery .divGalleryControls { position: relative; color: #FFFFFF; height: 100%;
}
.divGallery .divGalleryControls .btn { border-radius: 15px; background: #333333; margin-top: -12.5px; position: absolute; display: block; height: 25px; width: 25px; right: auto; left: auto; top: 50%; -moz-box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000;
}
.divGallery .divGalleryControls .btn.goRight { left: 30px;
}
.divGallery .divGalleryControls .btn.goRight svg { margin-right: 1px; margin-left: -1px;
}
.divGallery .divGalleryControls .btn.goLeft { right: 30px;
}
.divGallery .divGalleryControls .btn.goLeft svg { margin-right: -1px; margin-left: 1px;
}
.divGallery .divGalleryControls .divGalleryControl.points { text-align: center; position: absolute; display: block; bottom: 20px; right: 0; left: 0;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap { position: relative; display: inline-block;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap ul { display: inline-block; padding: 0; margin: 0;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap ul li { display: inline-block; padding: 5px; margin: 0px;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap ul li i { background: #333333; border-radius: 8px; display: block; height: 10px; width: 10px; -moz-box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap ul li.active i { background: #5AECF1; -moz-box-shadow: 0 0 5px #5AECF1; -webkit-box-shadow: 0 0 5px #5AECF1; box-shadow: 0 0 5px #5AECF1;
}
.divGallery .divGalleryControls .divGalleryControl.points .pointsWrap b { background: #333333; border-radius: 8px; position: absolute; display: block; height: 10px; width: 10px; top: 5px; left: 0; background: #5AECF1; -moz-box-shadow: 0 0 5px #5AECF1; -webkit-box-shadow: 0 0 5px #5AECF1; box-shadow: 0 0 5px #5AECF1;
}

Div Gallery - Script Codes JS Codes

divGallery = { isChanging: false, hoverChangePercent: 20, firstDivIndex: 2 // start from 0
}
// events
divGallery.events = { controls: { navbtn: { click: function () { if (!divGallery.isChanging) { // prevent event firing divGallery.isChanging = true; var $theGallery = divGallery.get.forEle(this); var toNext = $(this).hasClass("goLeft"); var toPrevious = $(this).hasClass("goRight"); var divNumber = $(".divGalleryInner .divGalleryBlock", $theGallery).length; var currentDivIndex = divGallery.get.currentDivIndex($theGallery); console.log(currentDivIndex); var toDivIndex = currentDivIndex+(toNext?1:-1); toDivIndex = toDivIndex < 0 ? divNumber + toDivIndex : toDivIndex; toDivIndex = toDivIndex > (divNumber - 1) ? toDivIndex - divNumber : toDivIndex; divGallery.toDivIndex($theGallery, toDivIndex, function() { divGallery.isChanging = false; }); } } }, navpnt: { click: function() { if (!divGallery.isChanging) { divGallery.isChanging = true; var $theGallery = divGallery.get.forEle($(this).parent().parent().parent()); var currentDivIndex = divGallery.get.currentDivIndex($theGallery); var toDivIndex = $(this).index(); if (currentDivIndex != toDivIndex) divGallery.toDivIndex($theGallery, toDivIndex, function() { divGallery.isChanging = false; }); } } } }
};
// get-value helpers
divGallery.get = { forEle: function(ele) { var attrForValue = $(ele).attr("for"); return $("#"+(attrForValue ? attrForValue : $(ele).parent().attr("for"))); }, currentDivIndex: function($gallery) { return $(".divGalleryInner .divGalleryBlock.active", $gallery).index(); }
}
divGallery.changeActivePoint = function($gallery, index) { var eleId = $($gallery).attr("id"); var $galleryControls = $("[for='"+eleId+"'].divGalleryControls"); var lItemWidth = $(".divGalleryControl.points .pointsWrap ul > li", $galleryControls).outerWidth(); return ($(".divGalleryControl.points .pointsWrap b", $galleryControls) .stop() .animate({"margin-left": index*lItemWidth+5}) );
}
divGallery.toDivIndex = function($gallery, index, callback) { callback = callback ? callback : function() {}; divGallery.changeActivePoint($gallery, index); $(".divGalleryInner .divGalleryBlock.active", $gallery) .removeClass("active") .stop().fadeOut(); $(".divGalleryInner .divGalleryBlock", $gallery).eq(index) .addClass("active") .stop().fadeIn(); callback();
}
// loader
divGallery.loadEle = function(ele, options) { options = options || {}; var blockNumber = ( $(ele) .addClass("divGallery") .find(".divGalleryWrap") .html('<div class="divGalleryInner">'+ $(".divGalleryWrap", ele).html()+ "</div>") .find(".divGalleryInner > div:not(.divGalleryControls)") .addClass("divGalleryBlock") ).length; var eleId = $(ele).attr("id");
/* $(ele) .find(".divGalleryInner") .css("width", blockNumber*100+"%") .find(".divGalleryBlock") .css("width", 100/blockNumber+"%");*/ var lis = ""; for (i = 0; i < blockNumber; i++) lis += "<li><i></i></li>"; $(ele) .find(".divGalleryControls") .attr("for", eleId) .find(".divGalleryControl.points") .append("<div class='pointsWrap'><ul>"+lis+"</ul><b></b></div>");
/* $(ele) .find(".divGalleryControls .divGalleryControl.points > i") .css("left", (($(".divGalleryControls .divGalleryControl.points > ul", ele).offset().left+5)/$(ele).width())*100+"%")*/ // first div and active the first point divGallery.toDivIndex(ele, divGallery.firstDivIndex); // events $("[for='"+eleId+"'].divGalleryControl" + ", " + "[for='"+eleId+"'].divGalleryControls .divGalleryControl.btn") .on("click", divGallery.events.controls.navbtn.click); $("[for='"+eleId+"'].divGalleryControls .divGalleryControl.points .pointsWrap ul > li") .on("click", divGallery.events.controls.navpnt.click); return ;
};
divGallery.loadEle($(".divGallery"))
Div Gallery - Script Codes
Div Gallery - Script Codes
Home Page Home
Developer Alan Mok | Aki Isamu
Username mok20123
Uploaded December 09, 2022
Rating 3
Size 4,709 Kb
Views 12,144
Do you need developer help for Div Gallery?

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!

Alan Mok | Aki Isamu (mok20123) Script Codes
Name
ParseURLParams js
No Game No Life Logo Animation
Search interface
ImageGallery.js, a map img gallery adapter
Timeline, description
Useless - HK Cyberport location
Swipe as the home screen.
Logo Animation
ContextMenu.js
Mok20123 Logo Animation
Create amazing art & images 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!