hi
i am loading images on my web site after page load with jquery, i use $(document).ready to load images after page load now i want to specify order so i can load images of my slide show in a manner and have my slide show hidden, after slide show picture load show it.
this is an html part of my code:
<a class="videoThumb imageLightbox" href="images/slider/pic-usa-11-large.jpg">
<img src="/images/blank.gif" class="delayLoad" onmouseover="this.src = './images/slider/pic-usa-11.jpg'" width=" 215px" height="160px"/>
</a>
and i load images after document ready:
$(document).ready(function() {
// Load images once the page has loaded
jQuery("img.delayLoad").each(function() {
// Create a new span element which we will wrap around our image
// Using a span because if the image was inside an <a> tag then online inline elements should be used
var delaySpan = document.createElement("span");
with (jQuery(this)) {
// Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
if (css('display') == 'none') {
var _display = 'none' } else {
var _display = 'block' }
// Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
var cssObj = {
'height' : css('height'),
'width' : css('width'),
'margin-top' : css('margin-top'),
'margin-right' : css('margin-right'),
'margin-bottom' : css('margin-bottom'),
'margin-left' : css('margin-left'),
'background-image' : css('background-image'),
'background-color' : css('background-color'),
'background-repeat' : css('background-repeat'),
// Hack for now, becuase IE doesn't seem to read the background-position property correctly
'background-position' : '50% 50%',
'display' : _display
}
}
// Apply our style properties to our span
jQuery(delaySpan).css(cssObj);
// Wrap the image in the span
jQuery(this).wrap(delaySpan)
// Hide the image (leaving just the span visible
.hide()
// Simulate the mouse over the image, whcih will cause it to switch the img src
.mouseover()
// Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
.removeAttr("onmouseover")
// Simulate the mouse moving out of the image (To reset the image to its normal state)
.mouseout()
// Once the image is loaded, perform a function
.load(function () {
// Fade the image in
// Remove the span by unwrapping the image
jQuery(this).fadeIn().unwrap();
});
});
});
(i used this document: http://www.purplepixelmedia.co.uk/Ourblog/tabid/78/articleType/ArticleView/articleId/80/Using-jQuery-to-loading-images-after-the-page-is-ready.aspx )
now i want to control images load and hide the box before all images are loaded and show the box after page load
how do i can do such task?
thanks
The jQuery Message Queueing plugin lets you perform serial AJAX requests. This may be what you're looking for.
Related
I've managed to upload images through drag & drop to a SP 2013 library by intercepting the paste and fileUploadrequest events (+ added mandatory headers and used /_api/web/getfolderbyserverrelativeurl(\'/sites/theSite/theLibrary\')/files/add(overwrite=true,%20url=\'aDynamicFilename.jpg\') as the request's URL).
The problem with this approach is that even if the image is uploaded, the image is not inserted in the editor (no error). I'm not setting config.uploadUrl for this approach.
Q#1: Is there any step which I should go through after the image is uploaded? Like telling the CKEDITOR instance to insert the image?
Later on, I've noticed that if I'm setting the config.uploadUrl to the same URL as I'm using above, the editor inserts successfully the image. The problem is that, from my trials, the config.uploadUrl is initialized together with the CKEDITOR instance (therefore, can't be assigned dynamically for each image, in case that multiple images are dragged and dropped on the editor).
Q#2: Is there another way to configure the uploadUrl or maybe some other config property that would allow the custom upload to work and insert the image in the editor?
Eventually made it work by following a similar approach as the on in this repo:
RyanSiu1995/ckeditor-ImageUploader
Use a FileReader and start loading the image when it's pasted to the
CKEditor
On the fileReader's onload event, create a img element in the
editor's document object with some opacity and with the fileReader's
Base64 string as the src
On the fileLoader's uploaded event, remove
the img and re-add it with the actual file's url (changing the src
attribute on the img was not triggering the editor's change event, which I was hooking into,so I chose to replace the whole element)
Here's the relevant section from the ckeditor-ImageUploader plugin:
fileDialog.on('change', function (e) {
var fileTools = CKEDITOR.fileTools,
uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ),
file = e.target.files[0],
loader = editor.uploadRepository.create(file),
reader = new FileReader(),
notification,
img;
// verify
if (!/image/i.test(file.type)) {
notification = editor.showNotification( 'Please check the correct format.', 'warning' );
setTimeout(function() {
notification.hide()
}, 2000);
return false
}
loader.upload(uploadUrl);
// preview image
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (e) {
img = editor.document.createElement('img');
img.setAttribute('src', e.target.result);
img.setStyle('opacity', 0.3);
editor.insertElement(img);
}
loader.on('uploaded', function(evt) {
editor.widgets.initOn(img, 'image', {
src: evt.sender.url
});
img.setAttribute('src', evt.sender.url);
img.setStyle('opacity', 1);
});
loader.on('error', function() {
img.$ && img.$.remove();
});
fileTools.bindNotifications(editor, loader);
// empty input
fileDialog[0].value = "";
I have this structure of pages with components inside
homepage
- jcr:content
- topBanner
- background
- file
secondpage
- jcr:content
- topBanner (different component from the homepage)
- background (same component as homepage)
- file
What I need is, when I upload an image to homepage background I want that same image goes to secondpage.
I have tried use granite properties but I'm stuck because I can't find AEM documentation for javascript
this is my serverside javascript for upload the image, based on image of AEM
"use strict";
use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js",
"/apps/digital/components/content/utils/Image.js",
"/libs/sightly/js/3rd-party/q.js"], function(AuthoringUtils, Image, Q) {
var image = new Image(granite.resource);
var imageDefer = Q.defer();
image.resource=granite.resource;
var CONST = {
PLACEHOLDER_SRC: "/etc/designs/default/0.gif"
};
// check if there's a local file image under the node
image.path=granite.resource.path;
granite.resource.resolve(granite.resource.path + "/file").then(function(localImageResource) {
imageDefer.resolve(image);
}, function() {
// Modifying the image object to set the placeholder if the content is missing
if (!image.fileReference()) {
image.src = CONST.PLACEHOLDER_SRC;
}
imageDefer.resolve(image);
});
// Adding the constants to the exposed API
image.CONST = CONST;
// check for image available sizes
if (image.width() <= 0) {
image.width = "";
}
if (image.height() <= 0) {
image.height = "";
}
return imageDefer.promise;
});
Basically I want to copy the file from homepage to secondpage and other pages that may exist. Or create a pointer in the background of the secondpage to the file from homepage.
How can I do this?
TopBanner Component HTML
<div class="dashboard-hello">
<div data-sly-resource="${ 'background' # resourceType='digital/components/content/authored/vf_background'}"/>
<div class="spring" id="homepage--greeting">
<div class="dashboard-hello__content">
<div data-sly-resource="${ 'greeting' # resourceType='digital/components/content/authored/vf_greeting'}"/>
</div>
</div>
</div>
What you need is a design_dialog alongside the dialog of the background component.
Design dialogs content changes are global accessible while dialog content changes are page specific. That means that the content stored via a design dialog is store at design path (usually somewhere under /etc/design/) while the content modified through the dialog gets stored at page level under component’s node.
You would have to modify the JSP rendering script of your background component also.
I would first obtain the background image path from the JCR property of the page specific content :properties.get("<image_path_property_name>");. If not set, I would fallback to the global background image currentStyle.get("<image_path_property_name>");. This way you would be able to set a different background image in secondpage/../background or "other pages that may exist".
Or if you don't want authors to use a different background image in the secondpage/../background pages, then only obtain background image path from the design property.
I want to reduce them to a maximum 200px width and keep the same layout with the 10px spacing the photos have. Also I don't want to style the posts to be that wide and use overflow:hidden that will only cut off the photosets.
jQuery Solution
For this solution you will need the latest version of jQuery and the jQuery plugin imagesLoaded included in the head of the theme before the following:
<script type="text/javascript">
$(document).ready(function() {
$('iframe.photoset').each(function() {
var i = this;
$(i).attr("onload", "ps_resize(this)");
var s = $(i).attr("src");
s = s.replace(/\/500\//, "/200/");
$(i).attr("src", s);
});
});
function ps_resize(i) {
$(i).contents().find("body").imagesLoaded(function() {
$(i).attr("width", 200);
$(i).attr("height", $(this).height());
});
return false;
}
</script>
What Solution Does
When the DOM is ready, find all the photoset iFrames
For each iFrame...
set the "onload" attribute to your frame resizing function
get the frame's source url, change the size (e.g. 500) to 200
set the frame's source url (this will cause it to reload with a smaller photoset)
In the resizing function...
wait for the images to load
set the frame width to 200
set the frame height to the new height of the photoset
Additional Code for Infinite Scroll
If you are using the Infinite Scroll jQuery Plugin, you will need to additionally include this in your success callback function:
...
$(newElements).find('iframe.photoset').each(function() {
var i = this;
$(i).attr("onload", "ps_resize(this)");
var s = $(i).attr("src");
s = s.replace(/\/500\//, "/200/");
$(i).attr("src", s);
});
...
Obviously, if you're using Infinite Scroll, I would suggest defining a function that is called on each iFrame on both the initial load and the scroll so you don't have repeated code to maintain.
I am wanting to use Collapsible DIVs to show and hide content from the user.
I found this jQuery code to do the expand and collapse:
http://webcloud.se/code/jQuery-Collapse/
However the content is already loaded in the divs (its just hidden from view).
So I then found this:
http://www.raymondcamden.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile
Which loads the content into the opening div but also unloads it when it closes!
However its all mixed in with jQuery mobile and so it styled.
I want to be able to style the divs myself. also the first example uses nice bounce or fade effects to bring the content into view.
The reason for doing this is I want to show the user different content such as images or flash files but I don't want everything to load into the page on page load, this would be too much stuff.
So how can I use the first jQuery Collapse example but with loading external pages in?
I liked the question so I spent a little time making something close to a plugin:
//only run the event handler for collapsible widgets with the "data-url" attribute
$(document).delegate('.ui-collapsible[data-url] > .ui-collapsible-heading', 'click', function () {
//cache the collapsible content area for later use
var $this = $(this).siblings('.ui-collapsible-content');
//check if this widget has been initialized yet
if (typeof $this.data('state') === 'undefined') {
//initialize this widget
//update icon to gear to show loading (best icon in the set...)
$this.siblings('.ui-collapsible-heading').find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-gear')
//create AJAX request for data, in this case I'm using JSONP for cross-domain abilities
$.ajax({
//use the URL specified as a data-attribute on the widget
url : $this.closest('.ui-collapsible').data('url'),
type : 'get',
dataType : 'jsonp',
success : function (response) {
//get the height of the new content so we can animate it into view later
var $testEle = $('<div style="position:absolute;left:-9999px;">' + response.copy + '</div>');
$('body').append($testEle);
var calcHeight = $testEle.height();
//remove the test element
$testEle.remove();
//get data to store for this widget, also set state
$this.data({
state : 'expanded',
height : calcHeight,
paddingTop : 10,
paddingBottom : 10
//add the new content to the widget and update it's css to get ready for being animated into view
}).html('<p>' + response.copy + '</p>').css({
height : 0,
opacity : 0,
paddingTop : 0,
paddingBottom : 0,
overflow : 'hidden',
display : 'block'
//now animate the new content into view
}).animate({
height : calcHeight,
opacity : 1,
paddingTop : $this.data('paddingTop'),
paddingBottom : $this.data('paddingBottom')
}, 500);
//re-update icon to minus
$this.siblings('.ui-collapsible-heading').find('.ui-icon').addClass('ui-icon-minus').removeClass('ui-icon-gear')
},
//don't forget to handle errors, in this case I'm just outputting the textual message that jQuery outputs for AJAX errors
error : function (a, b, c) { console.log(b); }
});
} else {
//the widget has already been initialized, so now decide whether to open or close it
if ($this.data('state') === 'expanded') {
//update state and animate out of view
$this.data('state', 'collapsed').animate({
height : 0,
opacity : 0,
paddingTop : 0,
paddingBottom : 0
}, 500);
} else {
//update state and animate into view
$this.data('state', 'expanded').animate({
height : $this.data('height'),
opacity : 1,
paddingTop : $this.data('paddingTop'),
paddingBottom : $this.data('paddingBottom')
}, 500);
}
}
//always return false to handle opening/closing the widget by ourselves
return false;
});
The collapsible HTML looks like this:
<div data-role="collapsible" data-url="http://www.my-domain.com/jsonp.php">
<h3>Click Me</h3>
<p></p>
</div>
Here is a demo: http://jsfiddle.net/YQ43B/6/
Note that for the demo I found the best way to make the initial animation smooth was to add this CSS:
.ui-mobile .ui-page .ui-collapsible .ui-collapsible-content {
padding-top : 0;
padding-bottom : 0;
}
The default padding added by jQuery Mobile is 10px for both top and bottom paddings, I added those values as data-attributes to each widget to maintain the defaults.
Note that this code can be slightly tweaked to show other types of content, I used JSONP simply because you can use it on JSFiddle.
Here is an example that I made :
$(document).ready(function () {
$('.accordian_body').hide();
});
$('.accordian_head').click(function () {
$(this).next().animate(
{ 'height': 'toggle' }, 'fast'
);
Then in HTML
<div class="accordian_head"></div>
<div class="accordian_body"></div>
in CSS you can style the head and body however you like , to add in code behind -
<asp:Literal ID="lit1" runat="server" />
foreach(DataRow dr in DataTable.Rows)
{
lit1.Text = lit1.Text + "<div class=\"accordian_head\">" Whatever you want... "</div><div class=\"accordian_body\">" Whatever in body "</div>
}
Check this link it's in php and shows how to load external link to DIV Ajax can load only internal pages and doesn't work across domains.
Im using this code to change the src attribute of an image tag (using prototype and scriptaculous):
new Effect.Fade("images",{afterFinish:
function()
{
$("detail").setAttribute("src", "img/02.jpg");
new Effect.Appear("images",{duration:0.8});
}
});
Where "images" is the container (a div) and "detail" is the img tag
The result is the current image fades, appears and then the new image suddenly shows.
My question is, how can i check the new image is fully loaded by the browser to trigger the Effect.Appear after?
Is there another way to do this?
Images have an onload event you can hook up to:
$("detail").onload = function()
{ do_stuff(); } // Remember to do this BEFORE changing the src
In my experience, it is a bit flaky sometimes (at times doesn't seem to get executed). It would be better to pre-load the image and allow this effect only after the full document has loaded (onload instead of dom:load or ready).
Replace
new Effect.Appear("images",{duration:0.8});
with
Event.observe("detail", 'load', function() {
new Effect.Appear("images",{duration:0.8});
Event.stopObserving('detail', 'load');
});
To tell the user that you are loading the image, you could set a css background to the image, with a spinnging circle or whatever suits.