Develop Reference

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.

Best approach to showing multiple html without reloading page

I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!

Where does WordPress store custom post types?

I've downloaded a theme on WordPress, installed it and added a few pages etc. I'm wanting to add a bit of functionality to it so i've decided to add a sticky menu using jQuery. I've installed the relevant scripts and got the plugin working.
The theme I downloaded off themeforest allows end users to create a 'section', Which is basically a custom content type that can break parts of the page up. So on my homepage I've broken up parts of the page in to sections, but I want to add the sticky to a particular section, so when you scroll down to it, the section remains in view at all times.
To use the sticky plugin i either need to apply a class to the parent div or wrap the parent div in tags. So my question is, is there any way to actually edit the code of a custom content type? I know that WordPress works on a template basis, so every time you create a page, post etc. it's just stored in the database. But surely there must be a way to edit the code of a particular page.
I hope i've made sense. For anyone wanting to know what i'm on about heres the link -
www.gogoblondie.com
The website is still in development, but it's the black section with that i want to stick as the user scrolls.
Arran

Based on your markup structure and needs :
jQuery('nav').closest('.section').sticky({topSpacing:0});
Will work.

link tag calling js function don't work

I have a static site with classic menu like: home, services, contact etc links.
What I'm trying to do is reducing the site's size.
So, instead of using multiple pages for links (like home.html, services.html) I'm trying to keep only one page and then (when clicking occurs) dynamically change content.
html code (sample):
contact
<h1>old text</h1>
js code:
function ContactClick() {
$('h1').html('new text to change, but it doesnt work, yay!');
}
Something funny happens. If I click on the link, 'old text' becomes indeed 'new text', BUT ONLY FOR 1 SECOND! And then, it changes right back to 'old text'!
I have tryied calling like this: <a href="javascript:ContactClick();"> and it works just fine, but still I need to refresh the page when click event occurs (I have some color changing stuff on site, lol).
Is there another way to reduce site's size, or my idea is just fine?
OR
Is there a solve including refreshing the site and calling the js junction from link?

Perhaps you shouldn't be reloading the page in your href.

You do not need to reduce the site's size. Static pages that contain only text are small and load in a fraction of a second even at the first time. After that, they will be in cache and load instantly.
On the other hand, if you put all the text in one page, plus add some javascript code, the result is not smaller but bigger than the static pages.
Further, you should remember that javascript does not always work. For example, many people disable javascript for security reasons or to avoid irritating advertisements. Therefore, navigation should never be dependent on javascript. At the very least, you should have noscript part that works with static pages in case javascript is disabled. (But this will make the page even bigger.)

Pagination with special loading function?

I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.

Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.