I want to create a photo gallery element which has a play button and the next/previous navigation...
I can do the next and previous by using ajax load...and i do not want to preload the data for play functionality..the only way i can think of is using ajax call in a timer for play functionality...but again..calls will happen in an infinite manner till the person navigates away...is there any better way that i can do >>>??? can i jus make one ajax call to get the html of each and put in array and iterate..if so how do i go about it >>??? or is there a better solution for this??
get all image urls from 1 ajax call and store it in a array and dynamically set image src using javascript over a time. But without using preloading the flicker may occur
Here is a simple approach.
//Global variable
var imgList;
var imgPntr = 0;
//AJAX function
function getImagesUrl()
{
//Some code here
//On success
return arrayOfUrl;
}
// call this to prepare the images
function prepareImages()
{
var temp = getImagesUrl();
for(var i = 0; i 0) {
imgPntr--;
//Load this image in your gallery
loadImage(imgList[imgPntr]);
} else {
//Either rotate to end or alert the user end or disable prev button
}
}
// Call on press play
function play()
{
// Use setTime out and call showNext() until end
}
Related
This is my first post here, so please bear with the formatting.
What I basically wanted to do was switch from an event to another with an onClick event.
It worked, so I wanted to add a loading image in between the 2 images.
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
It just waits for a while before changing the image, but the loading.gif does not load at all. On clicking the button, there is a delay, while the original image stays, and then the gerrard.jpg opens.
WHY IS THE LOADING.GIF BEING IGNORED ??
HTML, not really required here,but still
<img src="gerrard.jpg" id="details" name="details">
<br/>
<form id="change">
<input type="button" id="change" onClick="gerrard(details)" value="Gerrard"/>
PS- I'm new to JavaScript.
JavaScript is async language so if you want to set a delay you should use setTimeOut function instead of loop (cause loop will execute parallel with the following code) use like this:
function gerrard(details) {
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
//here we waiting fo 5 secs, and then changing image
setTimeout(
function(){details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';}, 5000)
}
In your case:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
//while loop still going execute the code go next and changing image
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
So if you want to do it without settimeout, and with loop you need to add changing image inside loop:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
if (a==999999999)
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
}
I am facing one issue while using setInterval method.
When the jsp page is loaded at that time (onload), I have called one setInterval(function(),time) method. Following is the onload code of my jsp
var refreshLoop = 0;
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
Now I have Drag and Drop functionality on this page which drag one row from div to another div. When I Drop my Row to another table that table got refresh. I had done ajax calling one drop happen to another div
Now What I want to do is when My drop id completed I want to clear this setInterval and make to default.
ex : I have set my setInterval timings 10 min on page load so every time it will load the page after 10 mins . Now once I had drag and drop it will start counting 10 mins once I drop my row to another div.
I had done this in JavaScript and ajax.
Please suggests something on this issues.
window.clearInterval(refreshLoop) whenever you wish to clear the interval.
//try this code
<script type="text/javascript">
var refreshLoop = '';
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
if(refreshLoop){
clearInterval(refreshLoop);
refreshLoop = '';
}
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
</script>
When you want to clear the timer, use:
clearInterval(refreshLoop);
startRefresh();
I have a webpage with images.
A user can click on images to show() or hyde() these images.
Sometimes, the user opens a popup to watch a video.
Then the code hide() all elements previously opened.
When the user closes the video, i need to know which elements was previously opened in order to show only them.
What is the best way to do that ?
What i've done :
I've created an array and i push images names into it.
var arr_popup_open = [];
Then, this function is called when user open a popup and hide all elements :
function toggleAllPopup() {
if( $('#popup_micro_1').is(":visible"))
{
$('#popup_micro_1').hide();
arr_popup_open.push('#popup_micro_1');
}
if( $('#popup_micro_2').is(":visible"))
{
$('#popup_micro_2').hide();
arr_popup_open.push('#popup_micro_2');
}
if( $('#popup_micro_3').is(":visible"))
{
$('#popup_micro_3').hide();
arr_popup_open.push('#popup_micro_3');
}
}
// and so on ... I have 7 images so it seems it's not very well optimized
When i need to show only images previously opened, i execute this code, a loop to show() elements in array.
$('#close_pop_up').click(function() {
for(var i= 0; i < arr_popup_open.length; i++)
{
$(arr_popup_open[i]).show();
}
});
What do you think about that ? Is there a better way to to do it ?
There are a few ways you could go about this with jQuery. Your way should work, but if you want to reduce the amount of code you could do something like:
var visibleDivs = $('div:visible', '#ContainerDiv');
Alternatively you could add a specific class to all visible elements when you show them and use:
var visibleDivs = $('.someClassName');
When hiding them due to your popup, you can store the list in the data of any element. In this case, putting it on #close_pop_up might make sense:
visibleDivs.hide();
$('#close_pop_up').data('myDivs', visibleDivs);
When you want to show them again in your click function:
$('#close_pop_up').click(function() {
$(this).data('myDivs').show();
});
Looks fine to me. Just remember to clear arr_popup_open in the start of the toggleopen function.
The alternative you could do if you really wanted is to keep the information of what is open or closed in Javascript variables that get updated when you open and close things. This way you don't need to depend on complex things such as is(:visible)
Simply put I'm trying to sync two slideshows created using widgetkit lib in a joomla website, eg. when user clicks next slide on one, the other one also runs nextSlide() function in the slideshow.js. Same for previous. The problems I'm having is widgetkit uses anonymous functions for creating those slideshows and I dont have global references to them after they are created. With my limited programming knowledge I cant seem to trigger the nextSlide function for other slideshows once inside click handler.
If anyone can take a look it would be most welcome.
EDIT:
Of course I forgot to link the example webpage
http://www.yootheme.com/widgetkit/examples/slideshow
Mine is similar with only 2 slideshows, but is still only on local server.
Taking a brief look at widgetkit here is one possible solution. Using jquery you can search for any objects that have a class of slides with a child of next and click all others. The code provided below isn't tested but should point you in the right direction. As long as you don't call stop propagation or prevent default then the original click handlers should still fire.
var slideshow_count = $('.slides .next').length;
var cascade_countdown = 0;
$('.slides .next').each(function() {
$(this).click(function() {
// stop an infinite loop if we're already cascading till we've done it for all the elements.
if(cascade_countdown != 0) {
cascade_countdown--;
return true;
}
// we don't include the slideshow we're clicking in this count
cascade_countdown = slideshow_count - 1;
var clicked_el = this;
$('.slides .next').each(function() {
// only click elements that aren't the initiator
if(this !== clicked_el) {
$(this).click();
}
});
});
});
I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!
You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);
Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};
Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.
this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});