Speeding up Nivo-Slider - javascript

Just wondering if anyone can assist me with the following issue. I'm using nivo-slider on my HOME page to rotate 3 (large) images; hwoever, when a visitor visits the page for the first time all 3 images can been seen for a good 5 seconds before they all load into the slider.
This is the script that I'm using on the site:
<script type="text/javascript">
$(window).load(function() {
$('#nivo-slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:5000,
startSlide:0,
directionNav:true,
directionNavHide: false,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
});
});
</script>
And I then have the following HTML for loading the images:
<div id="slideshow">
<div class="slide slide-wide bg1">
<div class="containit ornament-left">
<div class="image">
<div class="thumb">
<div id="nivo-slider">
<img src="/images/slider/slide1.jpg" alt="" title="" />
<img src="/images/slider/slide2.jpg" alt="" title="" />
<img src="/images/slider/slide3.jpg" alt="" title=""/>
</div>
</div>
</div>
</div>
</div>
</div>
Does anyone know how to improve image load speed with this script and if so can you help me with it please. Thanks

Add display: none to #slider img. That will hide all the images until NivoSlider displays them properly.

Sorry, my first answer was entirely wrong, try:
#slider {
position:relative;
width: 800px; //your image width
height: 583px; //your image height
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
You can check my implementation here:
http://www.duopixel.com/portafolio/

Related

Hide div when contents of another div have loaded

I've got an image that loads as a series of slices inside a div. I only want to display the div after all its contents have loaded. I'm using another div to mask the div that's loading:
<div id="prepage" style="position:absolute; left:0px; top:0px; background-color:white; height:100%; width:100%; z-index:1">
<div align="center">
<p>loading... please wait</p>
</div>
</div>
I'm trying to hide the above div when the images in div id="graphic" have loaded. I was thinking something like this might work:
$(window).load(function() {
$("#prepage").hide();
});
However it's not working. This seems a relatively common question, but for some reason none of the answers work for me - probably because my coding skills are rudimentary. Thanks in advance.
update it seems I should have included the contents of the image div:
<div align="center" id="graphic">
<div style="position:relative; left:0px; top:0px; width:251px; height:350px">
<div style="position:absolute; left:0px; top:0px; width:251px; height:8px;">
<img src="foo.gif" width="251" height="8" alt="">
</div>
<div style="position:absolute; left:0px; top:3px; width:96px; height:12px;">
<img src="bar.gif" width="96" height="12" alt="">
</div>
^ and so on. There's 25 gif slices that make up the entire image in the div.
Hide the div initially, and attach an onload event to the images.
Create a data attribute that increases for each image loaded, then show the div when it equals the total number of images:
$('#graphic img').on('load', function() {
let loaded = ($('#graphic').data('loaded') + 1) || 1;
$('#graphic').data('loaded', loaded);
if (loaded == $('#graphic img').length) {
$('#graphic').show();
}
});
$('#graphic img').on('load', function() {
let loaded = ($('#graphic').data('loaded') + 1) || 1;
$('#graphic').data('loaded', loaded);
if (loaded == $('#graphic img').length) {
$('#graphic').show();
}
});
#graphic {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="graphic">
<img src="https://picsum.photos/50/50?random">
<img src="https://picsum.photos/50/51?random">
<img src="https://picsum.photos/50/52?random">
<img src="https://picsum.photos/50/53?random">
<img src="https://picsum.photos/50/54?random">
<img src="https://picsum.photos/50/55?random">
<img src="https://picsum.photos/50/56?random">
<img src="https://picsum.photos/50/57?random">
<img src="https://picsum.photos/50/58?random">
<img src="https://picsum.photos/50/59?random">
<img src="https://picsum.photos/50/60?random">
<img src="https://picsum.photos/50/61?random">
<img src="https://picsum.photos/50/62?random">
<img src="https://picsum.photos/50/63?random">
<img src="https://picsum.photos/50/64?random">
<img src="https://picsum.photos/50/65?random">
<img src="https://picsum.photos/50/66?random">
<img src="https://picsum.photos/50/67?random">
<img src="https://picsum.photos/50/68?random">
<img src="https://picsum.photos/50/69?random">
</div>

jquery plugin Pace.js not working

i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
this is my code
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
the jsfiddle will define the result of my work.
in my case the content and progress bar both will show simultaneously.
What i want: i want that first the progress bar will show and after the complition of progress bar the content will show like in this website.
Update:
This is what i try next but when the progress is complete then it will not show any contents...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk</title>
<link rel="stylesheet" href="css/pace-atom.css"/>
<style>
#contents {
display: none;
}
.cover {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1999;
background:rgb(33,33,33);
}
</style>
</head>
<body class="pace-done">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div>
<div id="contents">
<img src="d3.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
</div>
</div>
<script src="js/pace.js"></script>
<script type="text/javascript">
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
}
</script>
</body>
</html>
If the progress bar stuck at 99%, and if you are using Visual Studio, you have to uncheck 'Enable Browser Link' option. This will solve the incomplete progress bar issue.
Okay so an easy way to implement this is to hide all your contents until pace is done loading (I assume there is a reasoning to pace's load screen but I'm not sure).
So your contents could have an id #contents and be default display: none. You can then show the contents after pace is done like so
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
});
Here is a fiddle of it working http://jsfiddle.net/59caubpx/3/
Please check that you add all the file properly, like jquery.js or theme.atom.css or pace.js etc...

Configure PhotoSwipe to Not Use Entire Window?

I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.

Muliple hidden fullscreen divs?

I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}
here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.

Making an Image a Hyperlink in Nivo Slider

I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}
I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}
If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?

Categories