I'm creating a gallery of images with a thumbnail strip below. I would like to preload these images so that when the user clicks a thumbnail, the image immediately appears. There are quite a few photos though, so I don't want to wait until all images are preloaded until the user is able to click on a thumbnail. How do I allow for the images to load in the background, while allowing the user to click on a thumbnail and that photo appearing?
Here is the page for reference: http://tinyurl.com/lk6e2yx
If you use jQuery for example you can do something like
jQuery(document).on("click", "IMG.thumbnail", function(event){ ... });
That would enable the handler for any element matching now or future with the selector.
Related
I am trying to add an image on a page on my docusaurus website, I want to keep the photo high-def and want to show an initial thumbnail that is clickable that expands to the full-size high definition image. I have found how to link the picture to an external webpage, but I want the image to open as a function on the page the picture exists on.
I have a blog hosted by Blogger with a custom template: http://www.drugchannels.net/
Images uploaded to the blog are hosted at X.bp.blogspot.com (where X is a number). Examples:
https://1.bp.blogspot.com/-Jwy2VQYRIEA/WqmwvsA07WI/AAAAAAAATA4/jWVcEts1h1Y4IXM0hD0njUhSmQ2AZPnxQCLcBGAs/s1600/Specialty_vs_Retail-2014_vs_2017.png
https://4.bp.blogspot.com/-O4S9ps4u67k/Wk0yhTEuV-I/AAAAAAAASUE/5tPedr-p7_4kedNYU4RY711l6K3maokiQCLcBGAs/s1600/DCI-Copay_Accumulator-03Jan2018-CORRECTED.png
I want to have a white background when the image is clicked. (The images look fine on the site itself. This is not a problem with the blog's background, which is set to be solid white.)
Using the Inspect option in Chrome, I see the following information
The body formatting (background: #0e0e0e;) does NOT appear anywhere on my blog or in my template.
How can I fix?
Thank you!
P.S. I have 10 years of legacy posts with images, so I need a global solution that changes the background to white for all images posted to the blog.
Wrap the image in a div and set the background color of that div with css. That should work
.divclass:active {
background:#FFFFFF
}
If you are opening the images in a new tab or window then your only option is changing the background of the images yourself with a photo editor. If you're just trying to give the user a full size view of an image when they click it you could use javascript/jquery and have a full size div with a background and an image pop up in full screen without sending them to the linked image. Theres probably quite a few jquery plugins that will do this with minimal coding knowledge, just google it.
Thanks, Riley.
I can't go back and edit hundreds of images, so the photo editor option won't work.
But based on your suggestion, I used the following solution:
1) Enabled "Showcase Images with Lightbox" on blogger
2) Added CSS from this page (http://www.howbloggerz.com/2016/05/how-to-customize-blogger-lightbox.html) with no background image and background color set ot white (#ffffff).
Downside is that charts/images now pop up on same page rather than opening in a new tab.
Thank you!
I am creating an AJAX transition between to pages where I have a hero image which stays the same on both pages.
After clicking on a link, I center the image, add the new HTML behind and fadeOut the center Image.
The problem is, even with a cached image (it is the same file) I see the image appearing suddenly in the behind (from AJAX response, rendering after appending to DOM) when fading out the image in the front.
Even by adding a little delay to the fadeout of the image in front, the image in the back is still no ready. (Probably the rendering just takes more time).
My options would be to wait for the Ajax image div to have rendered completely (which I don't know how to do), or – and that is what I'd like to try:
Replace (copy) the image within the AJAX response before adding it to the DOM.
Is this even possible, and will it help improving the performance?
I will also try to replace the div immediately after replacing the content with the AJAX response.
Any hints are still very welcome.
cheers
You could set the css z-index property so that the top image stays on the top. And set an event listener so when the image underneath is finished loading you can fade out the top image.
$('#bottom-img').on('load', function() {
$('#top-img').fadeOut();
});
Well thanks for the answer. This is what I meant. This would require some waiting for the image to finish loading and then fadeOut the top image. But I got a nicer solution:
Because the two images are exactly the same, I replace the content in the back (ajax response), and immediately after I copy the image on top into the ajax response (so I replace the image with an already loaded one).
Then I fade Out immediately.
This gives me a very smooth looking transition and the downside of the «waiting until loaded» is gone.
(In comparison to my initial question, where I wanted to replace the image within the ajax response before adding it to the DOM, I now add it to the DOM and manipulate it immediately.)
Thanks anyway.
Cheers
I've spent about 3 hrs last night trying to determine why the image that I upload via the Media Library Picker field keeps resizing to 200x200 when it is displayed in a blog post.
Its not resized after upload and if I insert that same image into the blog post it retains the original size.
I haven't done anything special, I just edited the Blog Post content definition by adding the Media Library Picker field. When I create new blog post, I click the Add button to select the media and then publish the post.
See sample screencap: http://imgur.com/Ju3Sryp
Thanks for the input!
By default, when you are displaying a media library picker field, it gets rendered by Modules/Orchard.MediaLibrary/Views/FieldsMediaLibraryPicker.cshtml. That template loops over the media parts in the field, and calls Display(BuildDisplay(content, "Summary")). That builds the shapes for each of the media content items pointed to by the field. One of these shapes is going to be a Parts_Image shape in your case. Notice that in the BuildDisplay call, a "Summary" display type was passed in. That means that the Parts/Image.Summary.cshtml template is going to be used to render each image. That template has the following code to render the image:
<img width="200" height="200" alt="#mediaPart.AlternateText"
src="#Display.ResizeMediaUrl(
Width: 200, Height: 200, Mode: "crop",
Alignment: "middlecenter", Path: mediaPart.MediaUrl)" />
This is what resizes the image to a 200x200 cropped thumbnail.
If that's not what you want, you'll have to override one of those templates. I'd recommend creating an alternate for FieldsMediaLibraryPicker.cshtml for the specific filed name that you've been using, and in the code, change the display type from "Summary" to "Detail". This way, the Image.cshtml will get used for each image, and that will not do any resizing.
Image resizes into shape by default. You should enable Shape Tracing Module than reload your page than expand shape tracing tool from page bottom than click on the image than create and change alternate.
My website displays thumbnail images. When the user clicks on an image, the image is displayed in a larger size. The images themselves exist in two sizes, the thumbnail size for fast rendering and then the larger size.
Initially the thumbnail size is downloaded and displayed. What I want is for the larger images to be downloaded (but be hidden) once the page has rendered/loaded. That way, the initial rendering is fast, but, when the user clicks on the thumbnail, the image is already downloaded.
At first I did this by
<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>
In js/jquery, after loading, I then set the src attribute to path, causing the image to be downloaded. I do not use this div element for anything except to download the image.
This works in IE, but Chrome does not download hidden images. Therefore, the image is first downloaded when the user clicks on the thumbnail. Maybe this is fast enough, but I'd prefer to already have the image downloaded.
What to do?
What I ended up doing was to make the div visible, but make it 1px by 1px. And then I made it a span, not div:
<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>
And then I still set src = path once the initial rendering is complete.
You may want to do something like this:
$(document).ready(function(){
//load images
//append images
});
Basically, you are loading the large images after the document has loaded. After that, you are appending the images like this:
$('.thumbnail').append('<img src="img/lol.jpeg" />');
You may want to put this in a for loop for lots of thumbnails.
Another solution is to use progressive jpegs.