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
Related
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?
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!
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
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 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.