Load more on clicking without loading all images first - javascript

I have created an "overview" container with 100 images. on visit the page will only show one image.
When you click "load more" you will see 1 more, etc.. etc..
<div class="overview">
<div class="block">
<img src="http://oi50.tinypic.com/4kyccw.jpg" alt="image_name_01" />
</div>
<div class="block">
<img src="http://oi46.tinypic.com/2n208j7.jpg" alt="image_name_02" />
</div>
<div class="block">
<img src="http://oi50.tinypic.com/120me85.jpg" alt="image_name_03" />
</div>
</div>
<div id="loadMore">Load More</div>
What I don't want is to load all the 100 images on visit.
but only 1 at the time.
(saving bandwidth if you're on a phone or a tablet) without the use of a database.
I used the "load more" from this question:
jQuery load first 3 elements, click "load more" to display next 5 elements
Example: http://jsfiddle.net/2qjt9/
Any ideas?

jsFiddle Demo
The image will only be loaded when it is set to the source of an image. This can be done with new Image().src="url" or in css. However, if you just have an array of strings, then none of the urls will be loaded. For example
var imgs = [
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
"http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg"
];
So I would store your image urls in an array like that and then use them when the time was right. Something I have taken to recently is using html templates. This would mean defining a set of html to populate
<div class="picTemplate">
<img />
</div>
And then removing it right at the beginning
var template = $('.picTemplate').remove();
So that you can later clone it in your event for re-use
$("#loadMore").click(function(){
var index = $('.picDisplay .picTemplate').length;
if( index >= imgs.length ){
$(this).remove();
return;
}
var next = template.clone();
var img = next.find('img')[0];
img.src = imgs[index];
img.alt = "some name";
$('.picDisplay').append(next);
});

Using jQuery, you could make clicking the button create the new div rather than just showing it using the .append() feature.
http://api.jquery.com/append/
Of course writing html in your javascript might get messy. But luckily you already have it prewritten and working, just copy and paste.
Using .attr() you could also give the image in each div a src only on click, saving the load bandwidth as well.
http://api.jquery.com/attr/

Related

How to make an image display on first page load, but not subsequent loads

I am running three photos in a js slideshow function, and I'm wondering if it's possible to have the first image in the slideshow display only when the side is FIRST loaded, but not when an user navigates to other pages in the site. If possible, I would like subsequent page loads to begin at the second or third image in the slideshow.
$(document).ready(function(){
$(function () {
setTimeout(playSlideShow, 6400);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 6400);
}
if (!$(currImgContainer).hasClass('secImg')) {
setTimeout(playSlideShow, 4500);
}
}
});
});
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
Storing data in the browser from previous page loads is pretty complicated and time consuming for a task like this.
Another option would be to set the carousel to display a different image based on which page it's being loaded on.
First, you can add a data attribute to a consistent element in each of your pages like this:
<body data-slideNum="2">
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
</body>
The, you can write some javascript to check that attribute on page load and set the carousel image number accordingly. Something like this:
var startingSlide = $('body').attr('data-slideNum');
Which, in this case would set 'startingSlide' equal to '2'.
Maybe you could use jQuery Cookie.
https://github.com/carhartl/jquery-cookie
On page load, check if the cookie is set, if not display the image and set it, if it is set don't do anything (assuming image is hidden by default).
Something like this:
if($.cookie('image') == undefined)
$('#image').show();
$.cookie('image', 'shown');
}

How to swap between two images with one separate hyperlink ONLY

Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.

How to display main image when clicked on its thumbnail using jQuery

My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.
You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute
I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!
Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.

Using jQuery to Swap Out Body Background Image on click and randomize on load

I've got a body background image that is being "placed" by a plugin called ezBigResize that basically allows the image to scale with the browser window.
The designer wants to image though to be able to be swapped out by a series of thumbnails on the page, along with that image being randomized on page load from that series of images.
Initially before those two additions, I just had it setup like this:
$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});
Then this is the code now (in a jQuery Tools scrollable)
<div id="bkgrSelector">
<div class="scrollNav">
<a class="prev browse left"></a>
</div>
<div class="scrollable">
<div class="items">
<img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
</div>
</div>
<div class="scrollNav">
<a class="next browse right"></a>
</div>
</div>
I'm a little over my head though to allow these to both randomize on page load and to swap out the image via the value in the href.
I tried something like this, but it didn't work and is obviously inclomplete. Plus, it doesn't address the randomization at all.
$('#bkgrSelector .items img[href]').click(function()
{
$("body").css("background-image", "url()");
});
Any ideas, help, etc. would be appreciated.
Are those <img> pointing at the full-sized image file? I absolutely LOATHE sites that use full-size images and shrink them to thumbnail size. The load times are attrocious.
If they're actually thumbnail-sized images, you won't be able to use that url directly as your background url, as you'd just be stretching a small thumbnail-sized image to cover the window and get a hideous pixelized mess.
If the page is being dynamically generated, you'd want to create a JS array that contains the URLs of the full-sized image urls, so that when a thumbnail is clicked, you can get the fullsize url from that array. Or at least have a standardized naming convention so a simple string manipulation lets you turn the thumbnail url into a fullsize image url.
Once you've got that array, it's a simple matter to randomize a choice from it:
var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];
$(document).ready(function() {
randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
$("body").css("background-image", 'url(' + randomURL + ')');
});

Can't get fade out function to work more than once

So this is the code that I have written. i have very little knowledge of jquery and just tried to write what I saw. I am sure their is an easier I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click. I am having the same problem on another script that I have, I can't seem to call a function more than one time. One and done it what it seems to do. Any help would be much appreciated.
$.noConflict();
jQuery(document).ready(function ($) {
$("#scrollmenu");
$("#e_emd").click(function () {
$("#e_em").show();
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_vd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").show();
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_sd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").show();
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_ld").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").show();
});
});
<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
I have upoloaded the full page I am working on.
The site I am trying it on is here http://www.mac-av.com/test2/
What I am seeing is that I can't use an id more than once to call a function where i have
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
Multiple times on the same page
I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have. I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category. So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.
It will work for the first set of buttons, but not afterwards. I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?
Could you put up a link to the page? If you could do this, I could debug it quickly. fadeOut will work more than once, so there must be something up with your on-page script and selectors.
Tips that might help in the meantime:
Be more verbose in your id names, it will help when looking back at your code or when other people look at it
Space things our properly when they are nested
You have a random $("#scrollmenu"); declaration at the top that isn't doing anything... you can get rid of that
You can make your code more DRY by making this into one function - pass it an array of all the selectors and the one you want to leave out, then on click loop through that array and if it matches the one you want to leave out, show it, if not, hide it. If you don't get what I mean here I can write an example.
A few things:
ids can only be used once per page
use CSS selectors and good markup to reduce the amount of code
use CSS to style your elements
jQuery can read element attributes, so take advantage of it.
<script type="text/javascript">
$(document).ready(function(){
// when any link inside scrollmenu is clicked
$(".scrollmenu a").click(function (e) {
// don't follow the link
e.preventDefault();
// find out which image to show
var target_id = $(this).attr('href');
// fadeOut all visible images inside .images that isn't the one we'll show
$('.images img').is(':visible').not(target_id).fadeOut("slow");
// show the target
$(target_id).show();
});
});
</script>
<div class="scrollmenu">|
Event Management |
Video |
Sound |
Lighting & Staging |
</div>
<div class="images">
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
</div>
You could combine this with #JonH's method for more complicated sequences of animations.
I set up an example for you to further elaborate on my comment. http://jsfiddle.net/jMQhZ/11/
Clicking the first box will fire the #e_emd click event. If you click that again, nothing will happen because the function has nothing to do. If you click show all you'll see that all the divs are set back to normal. Now clicking the #e_emd div will run your function again.
Why are you using the $.noConflict(); ? Try removing that. Also try removing the $ from your ready function and using it instead of "jQuery", so it looks as follows:
$(document).ready(function () {
// blah blah
});
And yes, document.ready fires when it's loaded, but you are linking your ids to events, so they should be fine. Do you have any 3rd party controls or other ajax controls on this page?

Categories