Loading certain images upon certain events (not on page load) - javascript

Is there a way in JS/jQuery to "block" the loading of certain images in the DOM, up until a certain event occurs?
In my case, I have a page of products (WooCommerce Shop page) where clicking a product opens a modal window containing the image gallery of that particular product. But instead of loading galleries of all products on page load (too slow) I'd like to bind the loading of the image gallery to the opening of the modal window.
I'm guessing it's not really possible but perhaps there's some trick that comes close?

You can add an img element in your modal window without any src attribute and update the src attribute based on the product selection.
Here's a Pen showcasing the idea :)

A satisfying way to achieve the same end result is to sabotage the src attribute of images, and then restore this attribute later on with JS.
Found at https://stackoverflow.com/a/5402812/871404 (thanks #arkantos too!)

Related

Multiple modals with galleries vs. a single dynamic one

Lets say we have a long list of posts on a single page. Each of those posts has a hidden div with multiple img tags inside it. When a user clicks on the post, the images inside the hidden div should be showcased in a modal gallery.
Which approach is better SEO-wise - outputting the Bootstrap modal + image gallery markup for each post and unhiding it whenever the user clicks on the post, or having a single hidden modal and clone()'ing images to it?
I'm leaning towards the first solution because it is way easier to implement. The second one requires listening to DOM events as I should only initialize the gallery after the images have been cloned to the gallery div inside the modal and thus is a bit trickier. Also, I'm not so keen about copying DOM nodes here and there.
Which is the better approach?
EDIT: I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
Both methods are equivalent from an SEO perspective for Google, but it may take it a bit more time to index your content for the second method since, it needs to execute Javascript.
However, not all search engines are capable of executing Javascript. Therefore, image tags are all they can eat SEO-wise.

FB.XFBML.parse() doesn't refresh Facebook comments

I have a JS photo gallery that loads individual images from an API into the page when users click a thumbnail. I'd like people to be able to add Facebook comments on each image. So I've got my Facebook comments element in the page that contains the gallery.
<div class="fb-comments" data-href="" data-num-posts="10" data-width="480"></div>
On loading the page and first populating the gallery I set the data-href attribute of the comments element to the URL for the first image (for example http://site.com/gallery/1027/1). Then if the user clicks on a thumbnail I reset that attribute to the URL for the selected image.
fbComments.attr('data-href', data.link + index);
FB.XFBML.parse();
The FB.XFBML.parse(); is what I've read you're supposed to do to get Facebook to refresh the comments. I've added a comment to one image and tried clicking on the thumbnail for an image without a comment. But my comment for the first image is still there. Can anyone suggest why?
I've tried logging out the FB object in my JS file, and it logs OK, so it is available at the point I call it. I've checked that the click event in my JS is indeed changing the data-href attribute to the right value. And when I hardcode a different data-href in the fb-comments element the comments render as expected.
I suggest that you completely remove the previous comments box from the dom, then insert a new html with the right data-href and then call the FB.XFBML.parse method.
Another thing is that you should specify where to parse, like so:
FB.XFBML.parse(document.getElementById("container-id"));

What is alternatives to use popup to avoid Firefox4 popup maximum count?

I used to use Firefox3.6 but with Firefox4.0 when certain amount of popoup windows are generated, following message will appear.
Prevent this page from creating additional dialogs
According to my research, about:config page has dom.popup_maximum variable to adjust max popup limit but I cannot ask my end users to change their browser setting just because of my app.
I searched alternative coding to popup.
Many of them defines div and hide/show them with CSS using jQuery.
But I have 10 HTML pages with button that popup same page.
window.open("http://www.sample.com","samplePage");
I do not want to pre-define the contents of samplePage in every 10 pages for this reason.
Is there any alternative to popup which I do not have to pre-define in every page?
You can still do the css trick, but put an iframe in the div.
Click button then does the following:
1. Set iframe src attribute
2. Show hidden div
You can load that sample page dynamically. You either may use frames (especially <iframe>s in here) or any type of ayax, which means receiving data from the server (html, xml, json, whatever) and then showing the data in a <div>. You don't need jQuery for that.

IFrame Inside IFrame

I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.
Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)
You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?

JQuery Lightbox - grouping images which are not a link

Here is what I want to achieve.
I am creating a simple online shop which displays a product grid. If I click on the photo of the product it should open up a lightbox window. However I want to be able to click Next and Prev to view images in the same gallery, however these other images in this gallery is not actually displayed on the webpage itself.
So I want to subgroup an image gallery from a single img link from the webpage. Is this possible?
Try adding all images on the page but display: none all of them except the first one.
You could create some empty anchors in the site, but with the right link in src and group in rel.
I have set up some webpages to show examples of how to use the "slimbox2" lightbox plugin. The site is http://www.trips.elusien.co.uk click on the "slimbox examples" link.
One such example shows how you might do this. Basically, as Marnix said earlier, "put some empty links" on the webpage. Or hide them via CSS "display: none".
Regards
Neil
fancybox simply allows you to create a thumbnail wrapped in an anchor and loads the enlarged image on demand.

Categories

Resources