Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a webpage, a simple index.php. With jquery I managed to set up 5 individual menus. Unfortunately I have to use like 150 thumbnail images in my gallery, and whenever I reload the page, all those pictures need to load in as well and it takes like 5-6 seconds. I tried to set up Lazy Load jquery addon, but it just didn't work for me (it is written for scrolling websites I guess..and mine is not like that).
I was thinking about writing a script, which prevents all those images loadin, but I don't even know how to start. My point is, thumbnail images should be loading only if the user clicks on the gallery link (which is the very same php page though).
Just put the images' url in a separate attribute like:
<img data-realsrc='realsrc'>
and then when you need to load them:
$(img).attr('src', $(img).data('realsrc'));
The above is the general implementation principle. For a real example look at the fiddle: http://jsfiddle.net/3UrUZ/
BTW doing what you did is not a good practice. I suggest you to use CSS Sprites istead of a lot of images. :) And there are a lot of sprites generators to help creating them.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Say, instead of saving Boolean in database, i'll just make client side of webapp check if image exists and if so, then display it, otherwise - default image.
Are there any negative consequences? For SEO?
What if i'll not even bother about "check if exists requests"? I'll just put default image beneath the desired one and if image is not exists, then client-side js will remove the remains of the image tag.
Default image behind broken image linke: I can't find a reference but I suspect Google might give a tiny penalty for broken image links.
A good way to do your "show default image if ideal image doesn't exist" is lazy-loading, and there are libraries to do it: you set all your images to start out as your default image, and then tell the library to go and fetch the real image. So just pick a library that fails gracefully and does nothing if the real image doesn't exist. Here's one that looks promising:
http://dinbror.dk/blog/blazy/
(Don't be put off by all the bells and whistles - for your case, implementation will be very simple. There's bound to be other simpler libraries out there.)
As to SEO penalties/benifits of lazy-loading, see: https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo However note that the answer is outdated. These days google runs scripts, so should be able to index the images.
Lazy loading and SEO: see also: http://dinbror.dk/blog/lazy-load-images-seo-problem/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm inspired by app.thefacesoffacebook.com and would like to build similar thing with Yammer (kind of social network) profiles for my organization.
I have already scraped the data I required like profile id, image URL and others in stored in the data base. But how to display the images in the webpage like app.thefacesoffacebook.com? Is it normally getting the URLs from DB and displaying images with IMG tag or any other trick they are using. I'm expecting to see the similar behaviour when you click on one image it should zoomin. I'm not really sure about to go about this, any ideas would be helpful. I hope information is enough to guide me, let me know if this makes sense.
Thanks
This is a question whose answer would really be immense, but from a bird's eye view, the most common way to implement this would be to employ pagination.
Pagination is a "lazy loading" scheme in which groups of images are loaded in predefined amounts. For instance, you may see a group of 20 images onscreen, but when you scroll to the bottom of those 20 images, an event is fired and the next 20 images are loaded and appended to the window.
If you can imagine in the olden days, before dynamic html, you would have had separate "pages" for each "chunk" of images. To see the next 20 images, you would click "next". Modern implementations are not much different in practice, only that they use JavaScript to asynchronously load each chunk automatically, and append it to the current page.
A small, abstract example might be as follows:
window.addEventListener("scroll", function() {
var i = 0;
if ( scrolledToBottom() ) {
i++;
loadNextImageGroup(i);
}
})
For more information on pagination and pagination techniques, check your favorite search engine for "pagination tutorials".
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm not sure if this should be under a different question or not, but I would like to know where to start with this. I have a set of 84 cards front and back, when a user starts, he/she sees the front(question) side of the card, then, he/she clicks the flip button and sees the back(answer) side. On the answer side, there's a button to continue to the next card. My question is, how would I set this up without creating a lot of show/hide/toggle functions, while animating each of them, for each card?
Take a look at jQuery plugins at official website or at Google. You need to find some plugins you want. See, for example:
http://www.jqueryrain.com/2012/12/best-jquery-page-flip-book-effect-with-examples/
http://blog.guilhemmarty.com/flippy/
You will get more help here with some code. But you need to find first the code example.
I think this links above are good places to start, and choose a plugin is probably the best way for you now. Maybe you find exactly what you want in a plugin, maybe you just need to extend it.
I like this 3d card flip jquery plugin: http://www.zachstronaut.com/projects/rotate3di/#demos
If you want to use jQuery as a starting point for the abstraction of this problem, then maybe jQuery widgets are a good pattern: http://jqueryui.com/widget/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Hi I am dealing with a report application that outputs some charts in picture formats like JPEG, PNG etc.
What I want to do is to fix 100px from top and 100px from left so that while the scrollable data is shown in the center, first column(name bar) and the top header(date) stays fixed. It is possible to do it with a HTML table structure but since I am working with ONE .jpeg file it does not work for me. Shortly, I need to divide one picture into pieces with CSS or jQuery.
EXAMPLE
This is what I am trying to do exactly. But I need to do it with a .jpeg file as I mentioned. I have to work with one stable image, means I can't request to divide the pictures into 3 pieces like; Header, First Column, Data.
I don't think that this question deserves all the downvoting.
As I understand it, the question is asking if it is possible to hold constant in a browser a part of an image and scroll the rest.
I think that the answer is no, but you can emulate it using two - sorry, three - copies of the image, using the CSS 'clip' property to extract appropriate parts of the images and other CSS to handle the scrolling. I don't have time to provide a worked example.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Wondering if I have a dynamic list of image data, whether there's any libraries or techniques out there to tile the list of data. Keep in mind I don't know a priori how long the list is, but let's say that it is at least one (tile) row's worth of elements.
e.g. something like this
I would make a grid, or pre-built table that has one row, and how ever many images acrross you want. Then when you get your images, get a count, and dynamically add rows, using the index of the image placing it into the index of the cell/td. Would be a good route, until you maybe find a library for it if there is one. Though, sometimes, if it isn't a huge "reinventing the wheel" type of snippet, there are some benefits to writing your own code for it. :) Hopefully that helps.
By the way, jQuery Masonary, and Responsive Photo Grid are some libraries you could look into to. Here is a related post for you:Mosaic Grid gallery with dynamic sized images