I am using Masonry (and imagesLoaded) with Wordpress:
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
and my site includes a number of images that ranges between 1 to 8 MB. I have noticed that the loading times are very long (I am using no pagination on Wordpress, so the page loads all content) and the grid keeps resizing until all images are loaded.
Is there a way to fix this?
This is my custom js:
$(document).ready(function() {
let $masonryGrid = $('.masonry-grid');
$masonryGrid.imagesLoaded(() => {
$masonryGrid.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
gutter: 0,
percentPosition: true,
transitionDuration: 0
});
});
});
You can create a preview version for all of your images - same dimensions, but drastically downscaled quality. Maybe with a "Loading" text or symbol over them.
Those previews should have the same filename with a suffix. You will have pairs of images like this
image001.jpg
image001_thumb.jpg
Then the individual image elements will then automatically start loading the full version :
<img src="image001_thumb.jpg" onload="this.src=this.src.replace('_thumb','');" />
And if you cannot directly influence image elements like this, add this to your custom .ready function (this is an example that would affect all images, just to give you an idea, you have to filter out only the images that are inside the grid)
var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
// If the image is already loaded, change it immediately
if(images[i].naturalWidth != 0) images[i].src = images[i].src.replace('_thumb','');
else // If not, give it an onLoad function to change after it does
images[i].onload = function(){
this.src = this.src.replace('_thumb','');
}
}
For a better experience, maybe you can try to reveal each item after its image has loaded.
See the extra exemples section on Masonry docs
Iteratively reveal items after each image is loaded. See explanation on issue #501
Related
I have a website where I use an Eventbrite Widget to checkout a page on my website.
It turns out that when running the script, the iframe, especially on cell phones, does not show the entire checkout. Scrollsbar appears to scroll and see some information.
It turns out that I would like to remove these scrollsbars, because some users don't bother to scroll them down 😱 and end up not filling in some data and not being able to proceed with the purchase.
The code I have is this:
I tried a height on the div, but it didn't work.
type her<div id="eventbrite-widget-container-489731288460" style="display: block; height: 100%;"></div>
<p>
<script src="https://www.eventbrite.com.br/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '489731288460',
iframeContainerId: 'eventbrite-widget-container-489731288460',
// Optional
iframeContainerHeight: 900, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
</script>e
I also put the iframeContainerHeight: 900, but on the cell phone the scrollbar continues to appear
If anyone knows how to solve it, I'm grateful.
Remove eventbrite iframe scrollbar
Disable width and height fields from image properties I am using ckeditor 4
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', {allowedContent:'img[!src,alt];'});
By using above method it shows only image properties with width and height hidden and rest of the controls also get visible false. Kindly suggest me a solution for disabling the width and height fields from image properties windows.
Thanks in advance.
I'm not sure I entirely understand your question. It seems you want to hide the fields that allow input of height and width. Your initial solution doesn't seem to affect the dialog box, but what content gets saved. These are very different kinds of solutions. My answer assumes you're seeking to alter the image properties dialog box fields.
Based on this earlier question, I recommend adding the following configuration:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtWidth' ); // Remove width element from Info tab
infoTab.remove( 'txtHeight' ); // Remove height element from Info tab
}
});
I'm making a bunch of stacked divs that will expand when moused-over to show an image, but I have a lot of images.
Is there a way in CSS or JS (I don't really know anything about JS) to have each div automatically use the next image in a folder? ex: the images are named map1.jpg, map2.jpg ... map91.jpg. and be able to use the same background-image:url but have something telling it to add 1 to the next image for each new div so I don't have to manually specify 90+ different images.
I hope I was able to explain that well enough. Thanks =)
In CSS this is impossible, cause you can't concatenate the url path for background-image.
in javascript this is pretty simple, using jQuery you can simply load all div you need when body is ready:
// on page load
$(document).ready(function(){
// 10 images to div #image-board
for(var i=0; i<10; i++){
// create a div with image #i
$('#image-board').append('<div><img src="my/collection/folder/Image'+i+'.jpg"></div>');
}
});
don't forget to create in your HTML page a <div id="image-board"></div> where all images will be listed to
I'll try to include lots of detail since you say you're unfamiliar with JavaScript. When you say stacked divs, I assume you mean one inside another. Start with a div with appropriate id and background in your html <div id="div0" style="background-image:url('map0.jpg')"></div> Here's some Javascript using jQuery (a very common javascript library you can include with a script tag) that will add a new div inside your first div with the updated url name.
for (var i = 0; i < number_of_images - 1; i++) {
var oldId = '#div' + i;
var newId = 'div' + (i + 1);
var newUrl = 'map'+(i+1)+'.jpg';
var newdiv = '<div id="' + newId + '" style="background-image:url('+newUrl+')></div>';
$(oldId).append(newdiv);
}
The for loop will go over every image, then a string is created in a series of concatenations that becomes your updated div. The '$' searches for the DOM element with that id, then adds the new div inside it. If by stacked you meant a new div underneath but not contained by the previous div, use .insertAfter instead of .append. Assuming your webpage can reach all of the images, this should work. Also notice I've 0 indexed this (the standard in Javascript) but your question referred to map1 as the first map. If you have already named these maps, you may need to re-index the for loop to 1.
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);