JS Navigation in gallery based on where user clicks - javascript

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!

Related

GotoAndStop in Adobe Animate

So I'm very new at writing code and I'm having trouble trying to create a slideshow/book and I've got the next and prev button working. But I want to have Tabs on the side that when you click on them it will go to that frame that has the picture and stop. For example: click on table of contents and have it go to and stop on that frame.
How do I go about writing the code for that?

Extension bar always visible

I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]

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!

Sliding page transitions with new content pre-loaded underneath

I am working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.

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