I am creating this custom theme www.designislikethis.tumblr.com, which uses the jQuery Masonry and the Slider plugins. In creating this theme I wanted to create my own photoset slideshow instead of messing around with the default Flash-based one.
I started by pulling the images from the JSON of each photoset post by the post's ID using JS and jQuery.
I then rendered these images onto my frontpage in a special div that is linked to a minimal jQuery slideshow plugin, so each image fades in and out.
The code I use to pull/render for each photoset post is as follows:
function photoSet() {
$('.photoset').each(function () {
var postID = $(this).attr('id');
var that = $(this);
$.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&callback=?",
function(data) {
var postPhotos = data["posts"][0]["photos"];
var postPermalink = data["posts"][0];
for(var i = 0; i<postPhotos.length; i++)
{
var photo250 = new Image();
photo250.src = postPhotos[i]['photo-url-250'];
postLink = postPermalink["url-with-slug"];
var setClass = ".photoset"+ i;
var imgClass = ".img"+ i;
$(that).find('.slide').append('<a class="'+ setClass +'" href="'+postLink+'"><img class="'+ imgClass +'" src="' +photo250.src+ '"/></a>');
}
});
});
}
Now my problem lies in that all the other elements on my tumblr index page are not rendered with JSON, so they load faster. By the time my photo set renders it's divs are unproportional to everything that has loaded around it, and so the image slider wont kick in and you are left with a mess of rendered images.
What's most annoying about this problem is that some times it works fine, and others it's a mess, depending on how fast the page loads, or if you have the website already cached in your browser.
To see the extent of my Javascript and how I am calling this photoset funciton see here:
http://helloauan.com/apps/DILTtheme/utils.js
I know it's a little messy, for I am new to all of this. :)
Thanks.
I don't know if it will help, but you could try the following:
If the images are the same size and you know that size set the ".slide" div to that;
Try preloading the images and only starting the slide show when they are loaded. e.g using a preload plug-in.
and making use of the "callback" function.
Related
I'm trying to create a portfolio website that resembles this, a full-page grid of images that change when you hover over them... (another example, the third screen!)
And currently I have a crude solution that looks like:
<img src="1.png" id="img" swap="2.png"/>
// then in JS...
$("#img").hover(function(){
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("swap");
_this.attr('src',swap).attr('swap',current);
}); //
code credit
But this isn't a very scaleable solution and other than having 1000 images, each with their own unique ID which is identified so the src can be toggled, I'm not sure what to do -- plus I don't know how this would react to different display sizes/screen cut-offs. And while background-image in CSS tiles nicely, it doesn't allow interactivity... unless maybe you had a JS script track cursor position(?)
!! This is my very first project, any help would be appreciated :) (Codecademy is a very sheltered learning environment........)
you don't have to use ids and create a handler for every image.
this will apply to every image CURRENTLY on the page:
$("img").hover(function(){
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("swap");
_this.attr('src',swap).attr('swap',current);
});
and this will react to every image, even images added after the page is loaded:
$(document).on('hover', 'img', function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("swap");
_this.attr('src',swap).attr('swap',current);
});
To account for screen sizes and your other concerns, you'd need to either set a fixed width and height on your images, or make sure all your images are of similar resolution.
You could do this with backgrounds as well by creating a grid of divs then change the background of the div on hover, similar to the above handlers.
I was recently looking for a smart responsive beautiful lightbox fork. I found a lot, the most easy to integrate and good looking. But I think I've been falling in love with PhotoSwipe <3. Problem is: it's - of course - the only lightbox alternative whos integration is not a piece of cake.
Meaning it's not just including some .js and .css files but to write your own DOM parser. That's fine if you want to be creative in the way writing HTML code but I just want to display a gallery - that's not where you have to be inspired by the muses.
Long story short: Does anybody know a project or fork for easy integration of PhotoSwipe?
PS: The website's already using JQuery and I'm willing to adjust my HTML code as needed.
Here is the minimum code necessary to get it running, I think. I got the main code, slightly modified, from Using PhotoSwipe with jQuery. Plus I added a function from the documentation to enable the zooming effect when you click on a thumbnail, since I figured that is part of the necessary coolness of PhotoSwipe. It assumes your thumbnails are in a container with a class of "thumbnail" (line 1), and it assumes that inside the thumbnail container are simple a tags (line 5 and 23). It also does nothing to dynamically load the PhotoSwipe HTML, I just pasted it at the bottom of my page. I will ultimately include it as a PHP snippet. I am sure that with a bit more work this code could be incorporated into the main PhotoSwipe js and it could be intitalized with something as simple as $('.my-gallery').photoswipe({options}). That would be nice.
Oh, additionally, to get it working at all you will need to include the photoswipe.css and "default-skin" files from here https://github.com/dimsemenov/PhotoSwipe/tree/master/dist.
$('.thumbnails').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
var $pswp = $('.pswp')[0];
$pic.on('click','a',function(event) {
event.preventDefault();
var $index = $(this).index();
var thumbnail = $(this)[0]
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true,
getThumbBoundsFn: function(index) {
// get window scroll Y
var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
// optionally get horizontal scroll
// get position of element relative to viewport
var rect = thumbnail.getBoundingClientRect();
// w = width
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
}
// Initialize PhotoSwipe
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
})
})
You can use my jAlbum PhotoSwipe skin, see http://jalbum.net/nl/skins/skin/PhotoSwipe
This requires no coding at all, the result can be embedded in a webpage.
For an example, see the sample album: http://andrewolff.jalbum.net/Reestdal_PS/
I'm wondering if there is a way to detect load event of multiple images (particularly, a function should execute when the last image in a given set has completed loading).
For instance, an user clicks on a link and lighbox appears with 10 images. When all images have loaded, loading bar should disappear.
jQuery(".lightbox-image").each(function(){
var image = jQuery(this);
jQuery('<img />').attr('src', image.attr('src')).load(function(){
hideLoadingBar();
});
});
This unfortunately triggers hideLoadingBar(); too early (after one image has completed loading).
P.S.
I also need my function to work after images have been cached so: jQuery('#img1, #img2').load(); won't work.
Check out this jQuery imagesLoaded plugin, it should suit your needs I think.
Well, it seems that no one has better idea, so below is my solution/workaround. The other answer to this question is probably what you want to use because it's a library created specifically for that but here's the solution that I'm going to use because it's shorter and simple:
var allImages = jQuery(".lightbox-image").length;
var counter = 0;
jQuery(".lightbox-image").each(function(){
var image = jQuery(this).find('.myimage');
jQuery('<img />').attr('src', image.attr('src')).load(function(){
counter++;
if(counter >= allImages){
hideLoadingBar();
}
});
});
Works for cached images and not cached images.
I have run into numerous sites that use a delay in loading images one after the other and am wondering how to do the same.
So i have a portfolio page with a number of images 3 rows of 4, what i want to happen is for the page to load,except for the images in img tags. Once the page has loaded i want images 1 of each row to load then say 0.5 seconds later the next image in the row(s) and so no. I'm going to have a loading gif in each image box prior to the actual image being displayed.
I know its doable but cant seem to find the term for doing this. This is purely for looks as it is a design site.
Thanks for the help.
This is very easy to do in jQuery
$('img').each(function(i) {
$(this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/Svs7p/3
For fading in rows one after the other in a table it just means changing the selector slightly. Remember to change from div to img -- I just used div for testing
$('tr').each(function(i) {
$('td div', this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/2Fg8S/
Here is what you can do, you can load the image tags with out the src and using a custom property:
<img alt='The image' path='image/path.jpg' />
then you can use javascript to load the images when the site is loaded or whenever you please;
// simplified
window.onload = function () {
var images = document.getElementsByTagName('img');
// loop and assign the correct
for (var i =0; i < images.length;i++){
var path = images[i].getAttribute('path');
images[i].src = path;
}
}
I hope you get the concept of how the images are delayed
**please note the path attribute is not a standard one.
The easiest way I can think to do this is to have a table set up that will eventually hold the image tags, but have none on load. Javascript can loop through an array of image urls, and insert those image tags into random locations on the table.
If you want to have the delay, setInterval is the perfect tool. http://www.w3schools.com/jsref/met_win_setinterval.asp
// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();
// Start loading
loadAllImages = setInterval( insertImage, 600 );
function insertImage() {
if( unpickedImages.length > 0 ) {
var imageUrl = unpickedImages.shift();
// pick empty x, y on your table
// Insert the image tag im that <td></td>
} else {
clearInterval( loadAllImages );
}
}
You really don't need javascript to do this. If you specify the image sizes in the HTML or CSS, the browser will layout and display the page while loading the images, which will likely be loaded in parallel. It will then display them as soon as it can.
That way if users re-visit your site and have the images cached, they all show up immediately. If you have a script to load the images after a delay, you are making visitors wait for content unnecessarily and all their efforts to have a faster browser and pay for a fast internet connection has gone to waste.
i have certain links, on mouse over of those links I am changing <div> background image
jQuery I have used is-
function imgchange()
{
$('.smenu li').mouseover( function(){
var src = $(this).find('a').attr('href');
$('.hbg').css('background-image', 'url(' + src + ')');
$(this).find('hbg').attr('title', 'my tootip info');
});
}
It is working fine but the problem is when I running it on server images takes 3-4 sec to be changed on change, but the second time I do mouse over images are getting changed instantly, I think this is because of browser stored images in cache. So I added one javascript to preload images on page onLoad() ivent -
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "images/soluinfo1.jpg";
heavyImage.src = "images/soluinfo2.jpg";
heavyImage.src = "images/soluinfo3.jpg";
heavyImage.src = "images/soluinfo4.jpg";
heavyImage.src = "images/soluinfo5.jpg";
heavyImage.src = "images/soluinfo6.jpg";
heavyImage.src = "images/soluinfo7.jpg";
}
</script>
<body onLoad="javascript:preloader()">
but this script has not solved my problem.what should I do?
#Richard's answer (sprites) is probably the best one for what you are after, but the reason your code is not working is that in most browsers, only the last heavyImage.src="" is given enough time to actually register with the browser as an actual request. You're creating only one Image object setting and resetting the .src attribute faster than the browser can request the files (I think modern JavaScript engines take the added step of removing all the intermediate .src statements specifically because of this).
There are a couple of ways to fix this. The easiest is to create multiple Image objects, one for each image. And the easiest way to do that is through something like this:
<script type="text/javascript">
function preloader()
{
function doPreload(strImagePath)
{
var heavyImage = new Image();
heavyImage.src = strImagePath;
}
var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"];
for (var i = 0; i < arrImages.length; i++) {
doPreload(arrImages[i]);
}
}
</script>
By putting the heavyImage variable inside its own function (remember to use the var keyword), you're ensuring that the Image object exists inside its own dedicated scope.
Another way to do this is to attach a "load" event listener to a single heavyImage. Every time the image finishes loading, go fetch the next image. The disadvantage to this method is that your images will be loaded one at a time (bad for navigation images, but great for, say, and image gallery), whereas the first technique will fetch the images in parallel (typicallly four at a time).
You might find it easier to change your approach and use CSS sprites (and another article). Then you would just have one image referenced, and you use CSS to set which part of that image gets shown in which scenario.
This assumes that the images you're using are under your control and you can use an image editor to combine them into one large image.