jQuery image slide show carousel when using ajax - javascript

I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
I'm stuck with how to build a slide show of images when using the ajax method they have.
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
Can you help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html (pulls images and returns it to the script
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
I just could not figure what to do more.
Desired

I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
An example would be something like this:
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>

Related

Lazy Load doesn't wait for click to load images that are above the fold

I am currently using Lazy Load on an image heavy webpage, and I don't want the images to load until I click a button. Lazy Load allows you to have event triggers like this, but I can only make it partially work.
Images below the fold wait for a click to appear, but anything above the fold is loaded when the page is initially brought up. Is this something that cannot be prevented, or am I doing something wrong?
Below is the code I am using.
<body>
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<img src="blank.gif" class="lazy" data-original="image.png" style="height: 500px; width: 500px;">
<script>
$("img.lazy").lazyload({
event : "click",
effect : "fadeIn"
});
</script>
</body>
I think the problem is, that the click event is not bound to an html element, e.g. a button. The plugin is not able to handle this out of the box.
So, I would use another plugin (e.g. justlazy), which is more suitable for your special use case.
<body>
<script src="jquery.js"></script>
<script src="justlazy.js"></script>
<span data-src="default/image" data-alt="some alt text" title="some title"
class="justlazy-placeholder">
</span>
<script>
$("#someButton").click(function() {
$(".justlazy-placeholder").each(function() {
Justlazy.lazyLoad(this);
});
return false;
});
</script>
</body>
The demo page of the plugin provides a lot of examples.

I want to show a image first then I want to show the site content

Suppose I have a page named a.html and a picture x.
Now, when users go to a.html, I want to show the picture x for 3/4s then I want to show the page content.
Can anyone help me to do this?
Here is a small code that will use pure js to show a image prior to showing the content of the site. I think this is similar to what people use to show a loading image before loading the content.
<html>
<head>
<title>Image before loading content</title>
</head>
<body onload="show();">
<div id = "myDiv">
<img id = "myImage" src = "http://jimpunk.net/Loading/wp-content/uploads/loading45.gif">
</div>
<div id="content" style="display: none;">
This is a CONTENT SECTION Put your content here
</div>
<script type = "text/javascript">
function show() {
document.getElementById("myDiv").style.display="block";
setTimeout("hide()", 5000); // 5 wait, change the delay here
}
function hide() {
document.getElementById("myDiv").style.display="none";
document.getElementById("content").style.display="block";
}
</script>
</body>
This yo can put in a HTML page and you shold be able to see where i made the image and where the delay time will be happening.
Here is a working example using the above code: https://jsbin.com/pixemiwubu/edit?html,output

Avoid GET of all contents of the HTML DOM

Context
I have a HTML5+CSS+JS slideshow designed to be synchronized between 50 clients in a domestic LAN with one wireless router.
Problem
Since the contents of the slides (mainly pictures) may be too heavy, I want to load them dynamically for each slide (e.g. as the client clicks a "next" button), since currently the site GETs all the files for every slide from the server at the beginning when the page is loaded, overloading the router.
In this question (another approach for the same problem) an user suggested me using AJAX to get only the DOM and then loading its contents dynamically. Nevertheless, his solution doesn't work for me, as the contents are loaded before the moment I want to.
Is this AJAX based approach correct? If so, what may I be doing wrong?
My code
slideshow.html (slideshow structure)
<html>
<head>
<title>My Slideshow</title>
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div id="slides-containter">
<div class="slide" id="slide_1">
<!--Contents such as images, text, video and audio sources -->
</div>
<div class="slide" id="slide_2">
<!--Contents -->
</div>
<!--A bunch of slides here-->
</div>
<script>
// Here I load the slides calling a function defined in slidesplayer.js
</script>
</body>
</html>
slideshow-placeholder.html (loaded when I enter to the slideshow URL)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/path/to/ajaxSlidesScript.js"></script>
</head>
<body>
<h1>Hello slides!</h1>
</body>
</html>
ajaxSlidesScript.js
$(document).ready(function() {
$.ajax('/path/to/slideshow.html', {
async : false,
complete : function ajaxCallback(slidesDOM) {
// Pull out the individual slides from the slideshow HTML
$slides = $(slidesDOM.responseText).find('.slide');
// For each one ...
$slides.each(function prepareSlide() {
// Store a reference to the slide's contents
var $slideContent = $($(this).html()); // <--- GETs all the files for this slide which I want to avoid.
// Empty the contents and keep only the slide element itself
var $slideWrapper = $(this).empty();
// Attach to focus event handled by the slideware
$slideWrapper.appendTo('body').on('focus', function injectContent() {
// Put the content in — NOW external resources should be downloaded via GET and loaded, not before.
$slideWrapper.append($slideContent);
});
});
}
});
});
Update: This approach won't work, as manipulating DOM object will cause the download of the resources even if you don't insert them in the DOM. You can see what I did in this question.
Ajax is definitive the right technology for your problem but as far as I can see your problem is simple.
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
With this piece of code it doesn't matter if you use ajax or not because you load the CSS file already and all images referenced in this CSS file are load directly at the beginning. In addition you should load all files asynchronous.
You can add <img> tags via JavaScript and load the images asynchronous...

How to display progress bar until whole aspx page is load?

I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
I tried following code:-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master .
So there is another for it .
Please suggest me usable link or samples.
in your sample if you are using jQuery, you can use following re-factoring to your code
$(document).load(function(){
$('body').css('visibility','visible');
}
You can add a reference to jQuery and then do a little code something like:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
I hope that might help! Good luck.
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>

jQuery Preloader Animation

I want to "preload" the start page of my website with a little gif-animation. Its a 3-frame-piece and I want to show it right before the first page. Are there plugins to preload a page with a specific animation shown?
You don't need a plugin, or even jQuery. Just assign the image to a variable in the <script> block in the <head> of your page. JavaScript prevents the content from loading until it has done it's job, so the image will already be cached by the page visitor when the HTML is rendered:
<head>
<script>
var animation = new Image();
animation.src = "images/animation.gif";
</script>
</head>
<body>
<div>
<img src="images/animation.gif" alt="oooh! lookee!"/>
</div>
</body>

Categories