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?
Related
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!
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!
I have a website, with few content. So, it loads fast in the navigator.
I want to load an jquery animation before show the first index.htm.
Sincerely I don't know how implement this idea. I don't want that the user clicks in the animation to continue to the main site. I want make an animation of 'x' time and when it finish, charges automatically the next html, or the rest of the page.
Thanks very much.
Change your page the way that it loads all content at once including the animation. But the main content is hidden (e.g. by inline CSS) and the animation block is shown. Once your animation is done hide the animation block and show main content instead. As simple as that. This also gives browser enough time to render main content while it plays your animation.
Or option 2 - load index.html with animation only and then load content via AJAX while animation is playing into hidden element.
I would provide an example code if i had laptop or PC at hand, but basic sequence should obvious
And what about using frames / iframes? Have a simple page with jquery or any other animation and inside this page have a iframe. When iframe is loaded, hide a animation. When iframe is not loaded - show a animation.
I suppose that you want to display some ads in animation. So, then you can create condition - set min time of displaying.
I was wondering if it's possible to change a html page on a mouse drag event. I'm trying to allow a user to click and drag a white box to the left to change the page. The link to the project is here:
URL: http://davidpottrell.co.uk/library/phone/solent.html
As you can see, I'm trying to replicate how a mobile phone works. I've got the transitions close to correct. I'm now trying to create this mouse drag event.
If it is possible, does anyone know a resources or a tutorial as to how to accomplish the end result?
How about HTML5's History API? It allows to to change the current address without reloading the page.
So one way to do that might be to let AJAX fetch the contents of the next page, place it in the current page, then maybe a page slide transition or something, and then use History API to change the address.
Here's an article from Nettuts+ about it: http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/
I have a image slider. It´s a simple one and has been done with js/jQuery.
When i open the homepage, it starts from image1 and it goes through all of them and then starts up the loop again.
The thing i don´t know how to accomplish is:
Is there a way that i can separate the slider from the .html page? The point is - can i make the slider to remember its current image and when i open another .html page to start from the current one in the previous page?
For example i have 30 images loaded in the slider.
The current one is image12 -> i load another .html page in the browser and the slider starts from image12, not from image1
Rewrite to handle a setting value like startSlideShowFromImageNo
Set/Update a cookie on each slide change
Read that cookie on init of slideshow