Slidein portfolio without ajax

Developer
Petri Pottonen
Size
4,965 Kb
Views
26,312
  1. Slidein portfolio without ajax Previews
  2. Slidein portfolio without ajax HTML Codes
  3. Slidein portfolio without ajax CSS Codes
  4. Slidein portfolio without ajax JS Codes

How do I make an slidein portfolio without ajax?

What is a slidein portfolio without ajax? How do you make a slidein portfolio without ajax? This script and codes were developed by Petri Pottonen on 26 August 2022, Friday.

Slidein portfolio without ajax Previews
IQ Test

Slidein portfolio without ajax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>slidein portfolio without ajax</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="spacer"></section>
<div class"pofo-item" id="first-pofo">
<h1>First portfolio item</h1>
<img class="lazy" data-original="http://www.safari.com/wp-content/uploads/2010/11/Fotolia_1674804_L.jpg"> Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä, liki Toukolan kylää. Sen läheisin ympäristö on kivinen tanner.
sadf<br>
sadf</div>
<div class"pofo-item" id="second-pofo"> <h1>Second portfolio item</h1> <img class="lazy" data-original="https://upload.wikimedia.org/wikipedia/commons/b/b8/Willys_Jeep_1943.jpg"> Tämä jälkimmäinen etu ja kunnia on Tuomaan, joka oikein on kuuluisa hartioittensa levyyden tähden. Omituisuus, joka heitä kaikkia yhteisesti</div>
<button id="first-button">first pofo item</button>
<button id="second-button">second pofo item</button>
<section class="spacer"></section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slidein portfolio without ajax - Script Codes CSS Codes

.spacer { height: 800px;
}
div { max-width: 500px; display: none; opacity: 0; -webkit-transition: 1s opacity ease 0.2s; transition: 1s opacity ease 0.2s;
}
div.open { opacity: 1;
}
img { max-width: 100%;
}

Slidein portfolio without ajax - Script Codes JS Codes

/*! * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2015 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/lazyload * * Version: 1.9.7 * */
(function($, window, document, undefined) { var $window = $(window); $.fn.lazyload = function(options) { var elements = this; var $container; var settings = { threshold : 0, failure_limit : 0, event : "scroll", effect : "show", container : window, data_attribute : "original", skip_invisible : false, appear : null, load : null, placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" }; function update() { var counter = 0; elements.each(function() { var $this = $(this); if (settings.skip_invisible && !$this.is(":visible")) { return; } if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $this.trigger("appear"); /* if we found an image we'll load, reset the counter */ counter = 0; } else { if (++counter > settings.failure_limit) { return false; } } }); } if(options) { /* Maintain BC for a couple of versions. */ if (undefined !== options.failurelimit) { options.failure_limit = options.failurelimit; delete options.failurelimit; } if (undefined !== options.effectspeed) { options.effect_speed = options.effectspeed; delete options.effectspeed; } $.extend(settings, options); } /* Cache container as jQuery as object. */ $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container); /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { $container.bind(settings.event, function() { return update(); }); } this.each(function() { var self = this; var $self = $(self); self.loaded = false; /* If no src attribute given use data:uri. */ if ($self.attr("src") === undefined || $self.attr("src") === false) { if ($self.is("img")) { $self.attr("src", settings.placeholder); } } /* When appear is triggered load original image. */ $self.one("appear", function() { if (!this.loaded) { if (settings.appear) { var elements_left = elements.length; settings.appear.call(self, elements_left, settings); } $("<img />") .bind("load", function() { var original = $self.attr("data-" + settings.data_attribute); $self.hide(); if ($self.is("img")) { $self.attr("src", original); } else { $self.css("background-image", "url('" + original + "')"); } $self[settings.effect](settings.effect_speed); self.loaded = true; /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); if (settings.load) { var elements_left = elements.length; settings.load.call(self, elements_left, settings); } }) .attr("src", $self.attr("data-" + settings.data_attribute)); } }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if (0 !== settings.event.indexOf("scroll")) { $self.bind(settings.event, function() { if (!self.loaded) { $self.trigger("appear"); } }); } }); /* Check if something appears when window is resized. */ $window.bind("resize", function() { update(); }); /* With IOS5 force loading images when navigating with back button. */ /* Non optimal workaround. */ if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { $window.bind("pageshow", function(event) { if (event.originalEvent && event.originalEvent.persisted) { elements.each(function() { $(this).trigger("appear"); }); } }); } /* Force initial check if images should appear. */ $(document).ready(function() { update(); }); return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); } else { fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.width() + $window.scrollLeft(); } else { fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollTop(); } else { fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollLeft(); } else { fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; $.inviewport = function(element, settings) { return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; /* Custom selectors for your convenience. */ /* Use as $("img:below-the-fold").something() or */ /* $("img").filter(":below-the-fold").something() which is faster */ $.extend($.expr[":"], { "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, /* Maintain BC for couple of versions. */ "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } });
})(jQuery, window, document);
$( "div" ).hide();
function display(pofoitem, animationDuration){
$("#" + pofoitem + "-button").click(function(){
// evt.preventDefault(); var hashParam = "#" + pofoitem; location.hash = hashParam; $('div').not("#" + pofoitem + "-pofo").slideUp( animationDuration).removeClass("open");; $( "#" + pofoitem + "-pofo" ).slideDown(animationDuration).addClass("open"); setTimeout(function() { $('html, body').animate({ scrollTop: $( "#" + pofoitem + "-pofo" ).offset().top }, animationDuration);
}, animationDuration+500); });
}
display("first", 200);
display("second" ,200);
$("img.lazy").lazyload({ effect : "fadeIn", // threshold : 200 skip_invisible : true });
$(document).ready(function() { if(window.location.hash) { var hash = window.location.hash; //Puts hash in variable, and removes the # character alert (hash); // hash found } else { // No hash found } });
Slidein portfolio without ajax - Script Codes
Slidein portfolio without ajax - Script Codes
Home Page Home
Developer Petri Pottonen
Username ketri
Uploaded August 26, 2022
Rating 3
Size 4,965 Kb
Views 26,312
Do you need developer help for Slidein portfolio without ajax?

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!

Petri Pottonen (ketri) Script Codes
Name
Squarespace translate five next and previous
Responsive typography example
Animated text background-image
JM navi offcanvas
Infinite scrolling background
Outrun test 1
Mouseover image
Delay animation loop scss
A Pen by Petri Pottonen
Wrap last word in span
Create amazing SEO content 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!