I cannot get 3rd juicebox gallery to show up - javascript

In the "work" section of my site, I cannot seem to get the 3rd gallery (Commercial) to show up.
Link - http://www.alliedouglass.com/20120521_index.html#work
You'll notice that if you start on the "Journalism" slide and then click on "Commercial" it appears briefly but then vanishes.
The photo gallery plugin is http://juicebox.net/ and content slider is flexslider.
This is my first website, so i'd like to apologize for the amount of errors in the code, and also for the slow page loading. These are all things I'm currently addressing, or am at least attempting to.

Related

Hyperlinks slide new pages rather than opening them

My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content

Can't scroll/Drag the page Up and down by clicking on carousel section

I am trying to use this carousel
http://tympanus.net/Tutorials/ResponsiveImageGallery/
But without using bottom part, I am only using thumb section to show movie posters.
Everything works fine, but When i open my page on mobile, I can't scroll the page up and down by clicking on carousel image.
Please find the code files from this link. https://drive.google.com/file/d/0BzUuSGoEEtDxWVRRT0dWY2J4V0E/view?usp=sharing
Any help would be much appreciated.

Different Functions for Rollover and Click Using jQuery/JS and href

Sorry if something like this has been asked, but I've spent a long time Googling it and searching it here.
I'm trying to build a homepage for a website where the menu is along the top, rolling over the menu items should show a description of the page in the middle of the screen, which they do, and this is working.
The problem is that because jQuery/JS is using the href tag to find the page the description is on, clicking on the menu item takes the user to a description page and not the actual page.
I've put the description paragraphs on separate pages from those they're describing since it'd be redundant if the description showed up on both home and the page the user wants to navigate to. I've also tried display=none in the CSS to get the description to be hidden in the main page and show on the homepage, but as the description carries the CSS from the main page, it's also being hidden on the homepage.
I'll post any code if asked, I wasn't sure whether to dump it all here or just certain parts.
Thanks

JS gallery page loading differently from main site JS gallery page

My goal is to link to photo galleries directly on a web page that uses a Jquery’s “Animate” and JS/CSS. The page in question is witold.org (click on either photo to go to a gallery I want to link directly.)
I learned why this is not possible due to security issues.
As such, I was thinking that perhaps I can create additional HTML pages for each gallery with just the gallery script. For example, this page.
But even though I am using the same gallery script, linking to the same CSS and same JS, the gallery has a lot of errors. Gallery seems to partially load: no photos load initially but when mouse is over the thumbs they show up, and when one clicks on a thumb the large JPG shows up. But then everything seems to stop working. I can't increment to next photo via clicking thumbs or clicking arrows.
I am missing some fundamental piece of this, but not sure what... I guess my question is that if I navigate to the gallery via main page it works but when I strip only gallery code to a seperate html page the code fails. Any ideas?

How to change Image Loading Order (for Lightbox)

I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).

Categories