how to preserve current state in image gallery? - javascript

I have a website(dwarfdog.com/cds_studio) which uses an image thumb gallery and has a next/prev arrow to view move images from that gallery. I can also view a detail page of an image by clicking on to it.
The requirement is when i am navigating to a second/third page in the gallery and click the detail page to view and when i am clicking "back" button on the detail page it takes me to the first page of the gallery rather the one i was in.
This website is developed in PHP(wordpress) for backend coding and jquery for the image gallery section.
Can anyone suggest me how do i preserve the current state of the gallery when i am coming from detail page to gallery page by clicking "back" button?

Related

JS Navigation in gallery based on where user clicks

I'm using the Royalslider WP plugin and a very minimal simple fade gallery, and there is the option to navigate-by-click which means the user can click anywhere and the next image loads.
What I would like to achieve is to have a 50%-50% line and if the user clicks on the left side of the screen, the previous image loads, and if clicks on the right side, the next image loads.
I found this but I can't get my head around writing the rest of the necessary JS code.
http://help.dimsemenov.com/discussions/problems/58856-navigatebyclick-previousnext-slide-based-on-cursor-position
http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-where-to-put-slider-javascript-api-code
Any help is appreciated.
Thanks!

Bootstrap Image Gallery - open modal image in new window

So with the Bootstrap Image Gallery addon created by Sebastian Tschan we can open images in a modal window and we can use slides or buttons to load up the next or previous images but there is an extra event action (left mouse button click on the loaded image) that does the same as "next" button (it loads up the next image) This function is a bit useless for me, so I thinking on modifying this click event, adding a better functionality to it.
Question is: How can I open the currently seen/loaded image in a new window with this event like HTML target="_blank" ?

Browser "back" Button doesn't restart javascript

A similar question has already been asked, but im not at all happy with the solutions, which just can't be the only ones in such a simple case.
So I've got a page with a javascript animation. There are 4 images which are anchors, which link to new pages, and once you click on them, they grow to full size and it looks like they transform to the background, because the image is the background of the next page.
So here's my problem: When i click a link everything goes well, the Image grows to screen size and then the anchor triggers with a delay and links to the new page. But then, once i click on the "Back" button in the browser on the new page, i come back to a page where the screen is filled with the Image i've clicked, and only refreshing gets you out of it.
Is there any way to like reload the page when you come back to it through the "back" button in the Browser?
did you try putting the code in jQuery $(..) all the code in side the paranthesis!

How to make back button return to prev page in iframe application on Facebook?

I have a Facebook application that is inside IFRAME. When person opens application the main site is displayed, and after clicking gallery i have a gallery of products.
Gallery has subpages that are displayed after clicking button next that calls new data using JS (no page reload).
And when person clicks on the product to see it (it's done by changing the URL of the top of the window, not the iframe itself).
And it works ok. But when person opens the product and wants to go back to the last page of the gallery it's not working because he is moved to the main site.
How to make the back button return to the last page displayed with JS?
You should add to every page change a fragment identifier then check for that and change page:
if(window.location.hash) {
var product = window.location.hash.substring(1);
// load your product
}

Fancybox / Galleriffic conflict - main image navigation link

I'm in the process of building a web showcase page that uses Fancybox v2.0.6 to open a hidden div when a user clicks a project thumbnail image. Each Fancybox div contains an overview for each project and a Galleriffic gallery of screenshots. I've been able to utilise multiple Galleriffic galleries on this one page thanks to this Google Group Discussion, but have run into issues with the main image.
By default in Galleriffic, users can navigate the gallery by clicking the main enlarged image or by choosing a thumbnail. The thumbnails are working no problems. However, when I click the main image, instead of showing the next image in the gallery, the Fancybox div disappears and a loading spinner appears - I think it belongs to Fancybox. If I then click the spinner div it closes and I'm back to the original webpage.
The best solution would be to remove the linking from the main image and just use the thumbnails to view the gallery. My various attempts have been unsuccessful - either the image vanishes or the spinner just continues to load.
Any ideas/suggestions are welcome at this stage! If you need to see any code to play around with, just let me know and I will post.
Many thanks in advance!
EDIT: Here's a link to a stripped-down version - if I view it locally then the loading spinners just sits there, online I get a URL error in the Fancybox: "[object HTMLDivElement] was not found on this server".

Categories

Resources