i am displaying a gif image on my wordpress site - when i refresh the page the gif is being cached at the final frame. I would like to make it so everytime the page is refreshed the gif restarts from the beginning. is their any code (php) i could add to the functions.php file in order for this to take place.
Thanks.
Tried a few different options on stack overflow such as:
<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>
and
var src = 'http://i.imgur.com/JfkmXjG.gif';
$(document).ready(function(){
var $img = $('img');
$('#target').toggle(
function(){
var timeout = 0; // no delay
$img.show();
setTimeout(function() {
$img.attr('src', src);
}, timeout);
},
function(){
$img.hide();
}
);
});
Related
Ok here is my code - stock standard and works if I simply select an existing image
jQuery(function($){
var file_frame;
$('#upload-button').on( 'click', function( e ){
e.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create a new media frame
file_frame = wp.media({
title: 'Select or Upload Media Of Your Chosen Persuasion',
button: {
text: 'Use this media'
},
multiple: false // Set to true to allow multiple files to be selected
});
file_frame.on('open', function(){
console.log("inside open");
});
file_frame.on('update', function(){
console.log("inside update");
});
file_frame.on('select', function(){
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = file_frame.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
$('#image-url').val(image_url);
});
file_frame.open();
});
});
But if I goto drag and drop an image in there the image is uploaded but an error is returned
"An error occurred in the upload. Please try again later."
What have I missed, I'm assuming its some kind of refresh for the existing media selection window and my googling has not turned up anything.
Cheers
EDIT
I have tried several things to get the uploaded image to be shown in the media frame once uploaded. Not having much success.
As I said it appears the image is uploaded and added to the media library but I am missing a refresh or reload of the frame to show the image.
Any one have experience with or know another place to go look?
Maybe this call when everything is 'done':
if(wp.media.frame.library) wp.media.frame.library.props.set({ignore: (+ new Date())});
Or if you need to separate the library Grid modal from media upload (edit post) modal:
if(wp.media.frame.library){
wp.media.frame.library.props.set({ignore: (+ new Date())});
} else if(wp.media.frame.content.get().collection){
wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
wp.media.frame.content.get().options.selection.reset();
}
I have a gallery in my website (on my computer, not on a server yet) and I have a problem on it. here is it's script(it's loaded from the server by php):
$(document).ready(function() {
$('.gallery').hide();
$('.gallery:first').fadeIn();
var galleryItems=$('.gallery').length;
var index=0;
setInterval(function()
{
index++ ;
var id="gallery-"+(index);
$('.gallery').hide();
if (index==galleryItems)
{
index=0;
}
$('#gallery-'+index).fadeIn(1000);
},7000);
});
The gallery works, but after some time that I'm not looking on the gallery it stop working correctly.
This is how it supposed to look:
picture 1
This is how it actually looks:
picture 2
What should I do?
I believe that when the index==galleryItems you are fading in item 0 instead of the last item. Then when the gallery continues it fades in the next item, resulting in doubling.
$(document).ready(function() {
$('.gallery').hide();
$('.gallery:first').fadeIn();
var galleryItems=$('.gallery').length;
var index=0;
setInterval(function()
{
index++ ;
//var id="gallery-"+(index); this is unused so it should be removed.
$('.gallery').hide();
$('#gallery-'+index).fadeIn(1000); // MOVED TO BEFORE INDEX RESET
if (index==galleryItems)
{
index=0;
}
},7000);
});
This is my code:
$(function(){
var btnUpload=$('#browse');
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUpload, {
action: '<?php echo base_url()?>index.php/post/upload_editmainimage/'+adinfoid,
name: 'uploadfile',
onSubmit: function(file, ext){
$("#progressid").css("display","block");
if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
$("#mainphotoerror").html('Only JPG, PNG, GIF, files are allowed');
$("#mainphotoerror").css('display','block');
return false;
}
},
onComplete: function(file, response){ //alert(response);
if(response){
/*$(".main_image").html('');
$(".main_image").html(response);*/
$("#progressid").css("display","none");
$("#image"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#imagemainicon"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#mainimageicon").attr("src",response);
$("#mainimageicon").attr("width",55);
$("#mainimageicon").attr("height",55);
$("#mainimageicon1").attr("src",response);
}else{
alert("error");
}
}
});
});
<input type="button" id="browse" class="browse_media" value="Browse">
<div id="progressid" class="displayNone">
<img src="//s3.amazonaws.com/s3.racingjunk.com/102/images/procesing.gif" width="117" height="20" />
Uploading.....
</div>
When I click on the browse button I need to show a progress bar for 5 minutes. After 5 minutes the progress bar will hide or not be shown. After the progress bar hides the image will then display.
How can I do this? Is this possible?
Try this
http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html
i haven't tried it myself but this night work
You have to do like this:--
<div id="popup1" class="popup_block">
<?php echo $this->Html->image('ajax-loader2.gif'); ?>
<h4>Processing Please Wait...! </h4>
</div>
In script:-
Using Jquery
//Fade in Background
jQuery('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
jQuery('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
var popID = 'popup1';
//var popWidth = 500;
//Fade in the Popup and add close button
jQuery('#' + popID).css({ 'width': '250' });
for time you can give in Your Jquery or do like this:--
window.setInterval(function() {
// this will execute every 5 minutes => show the alert here
}, 300000);
You cannot achieve that using the code you have shared. You see, you need to know how much data has been sent to the server so that you can show actual progress.
How People do it?
1. They used third party plugins like java Applet or Flash to upload files
2. They use an animated picture to show progress while the file is being sent (not actual progress).
3. They use HTML 5.
For real time feedback on how much file has been sent to the server you will need either 3rd party plugin (if you are on an older browser) or HTML5 XMLHttpRequest Object
See html5 file upload with upload status/Progress bar.
I am making a picture preview with jCarousel (http://sorgalla.com/projects/jcarousel/), but faced with one problem: I do not know how could I reload/refresh jCarousel dynamic list.
I have few categories of images. When I click on a picture in one of that, I need that the list would be created and preview start with that element. I have some code, but do not know how to make it re-create all list after clicking on other image that preview start with other image.
Here are my code:
$(document).ready(function(){
$("ul#stage li").live('click', function() {
var ul = $(this).parent();
var index = +(ul.children().index(this))+1;
var mycarousel_itemList = [ ];
$('li[data-id]').each(function () {
var $this = $(this);
mycarousel_itemList.push({
url : $this.attr("data-img"),
title : $this.attr("data-title")
});
});
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
function mycarousel_getItemHTML(item) {
return '<img src="' + item.url + '" width="800" height="600" alt="' + item.url + '" />';
};
alert(index);
jQuery('#mycarousel').jcarousel({
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
size: mycarousel_itemList.length,
scroll: 1,
start: index,
wrap: 'last',
animation: 'fast',
visible: 1
});
document.getElementById('popup-content').style.background='url('+$(this).attr("data-img")+') no-repeat center';
document.getElementById('fades').style.display='block';
document.getElementById("light").style.display = "block";
$("#light").fadeTo("slow", 1);
});
});
Everything is like that: there are images > I click on one of those > popup shows with jCarousel and one visible image and then I could scroll through all other images.
It is working good, but just a first time. When I click on other image (after closing popup), the view starts with that image which was opened last.
If something are not clear enough - please, ask. I will try to make it more precisely.
Thanks for your help!
You can recreate jCarousel, first use $('#mycarousel').remove(); and next init jCarousel again. I didn't really understand what you're trying to do, but this can help in most cases, of course jCarousel should have Destroy method but it hasn't.
And why you don't use jquery selectors in some cases?
How it works:
I'm trying to create an instant upload function with Jquery/Ajax. When a user double-clicks an image, a Fancybox shows up with the upload field. After choosing an image, the image is uploaded and the source of the clicked image is changed immediately.
The problem:
When having multiple images on one page, sometimes another image gets replaced by the new image (randomly).
The code:
function uploader(thumb) {
new AjaxUpload('imageUpload', {
action: 'uploader.php',
name: 'file',
onComplete: function(file, response) {
thumb.attr('src', response);
$.fancybox.close();
}
});
}
$("img").dblclick(function(){
var img = $(this);
$.fancybox({
href: '#imageUpload',
overlayShow: true
});
uploader(img);
return false;
});
What I've tried:
When I alert the ID of the image that should be replaced, it always alerts the correct ID of the image. And still it replaces another image instead.
Regards,
Bo
The way you're getting a reference to the clicked image is not good. You should extract the clicked element from the event object passed to the handler.
$('img').dblclick(function(event) {
var img = $(event.target);
...
});