Develop Reference

Display Image in Proper Orientation - Blazor Server Side

My page is displaying files from azure storage, some of which are in a landscape orientation while others are in portrait. My issue is that all of the files are displaying as landscape. At first I simply tried to add the following css:
.photo{
image-orientation: from-image;
}
But it seems like that css is deprecated/doesn't work on edge and chrome.
Next I tried to use blueimp's JavaScript-Load-Image. Which is working to show the image, but the orientation isn't changing - they are all still showing in landscape.
JavaScript:
function RotateImage(fileURL) {
var loadingImage = loadImage(
fileURL,
function (img) {
document.body.appendChild(img)
},
{ orientation: true }
)
return loadingImage;
}
HTML:
<div class="photosGridDiv">
#foreach (var file in currentFiles)
{
<div>
#(JSRuntime.InvokeAsync<object>("RotateImage", file.filePath))
<br />
#file.fileName
</div>
}
</div>
How the images look now (the first and second should be portrait):

Maybe handle rotation on client side, using exif-js(https://github.com/exif-js/exif-js) and apply a CSS transform.
EXIF.getData(imageElement, function() {
var orientation = EXIF.getTag(this, "Orientation");
if(orientation == 6)
$(imageElement).css('transform', 'rotate(90deg)')
});

Get the Data URI of the full sized image (not the thumbnail size) from Dropzone.js

I'm using Dropzone.js to upload an image. When the image is uploaded and I inspect it, it gives me this-
<img data-dz-thumbnail="" alt="AJ-Styles-WWE-2K19-cover-e1533698368369 (1).jpg" src="the_Data_URI">
Hovering over the src part shows the image is 120 X 120 pixels, where as the actual image is 800 X 450 pixels.
What changes do I need to make to Dropzone so as to upload the image of original size and not it's thumbnail size.

The callback function looks like this-
Dropzone.options.myDropzone = {
url: "UploadImages",
thumbnailWidth: null,
thumbnailHeight: null,
init: function() {
this.on("thumbnail", function(file, dataUrl) {
$('.dz-image').last().find('img').attr({width: file.width, height: file.height});
})
}
};
Form tag in the body of the html-
<form action="UploadImages" class="dropzone" id="myDropzone" enctype="multipart/form-data"></form>
In this part of the callback, the width attribute is set to file.width and height is set to file.height (that actually solved the problem)-
$('.dz-image').last().find('img').attr({width: file.width, height: file.height});
Now the images uploaded are in their original dimensions, and not the thumbnail default of 120 X 120 pixels.

Stop rotating images from pausing when hovering over them

I have rotating images which use javascript. The problem I am having is it pauses when the cursor is hovered over the top of the images.
How can I stop this from happening?
Original code from: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Thanks
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [900, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["01.jpg"],
["02.jpg"],
["03.jpg"],
["04.jpg"],
["05.jpg"],
["06.jpg"],
["07.jpg"],
["08.jpg"],
["09.jpg"],
["10.jpg"],
["11.jpg"]
],
displaymode: {type:'auto', pause:7500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
})
</script>
and...
<div id="fadeshow1"></div>

Take a look in the fadeslideshow.js code itself ( http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js ), the if block from line 129 to 132 can simply be commented out.

Remove this line
setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
from adeslideshow.js
It will solve your problem

jQuery Tooltip image rollover display larger image

I have an image gallery that displays a list of thumbnail images. I'm using the jQuery Tooltip plugin to display the image in a tooltip on rollover.
However, I want to display a larger image than my thumbnail image.
$(document).ready(function(){
$('.imageGalleryAlbum li a img').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", this.src);
}
});
});
My gallery listed thumbnail image ends with the following "_thumb_150.jpg"
I want to display the "_thumb_630.jpg" from the same directory/folder.
How can I do this?

Try replacing the _150 with 630 from the current image source.
src.replace('150', '630')
bodyHandler: function() {
var new_source = this.src.replace('150', '630');
return $("<img/>").attr("src", new_source);
}

Flowplayer progrss bar go fullwidth

I am using flowplayer with Javascript plugins for my mp3 file based site. Now everything is working except the progress bar and buffering. The buffer div is only have a width of 451px as my track div as got a custom width (I have given in CSS) of 903px. When I click on the play button the progress div will go full width that is 451px. There is no problem with the playback. When I supply a duration say as 402 or something, then the progress bar and playhead starts moving from the start point as desired. So I think this may be an issue with calculating the duration of the mp3 file. Please let me know how this can be fixed.
My code is like this
<div id="audio" style="display:block;height: 0px;visibility: hidden"></div>
<div id="footer" class="footer"></div>
window.onload = function(){
$f("audio", "swf/flowplayer-3.2.7.swf", {
// don't start automatically
clip: {
autoPlay: false,
autoBuffering: true,
duration:430,
baseUrl: 'http://localhost/gaanaOnline/gaanaonline',
onFinish: function() {
setTimeout('player_next()',100);
}
},
onLoad: function() {
load_clips();
},
// disable default controls
plugins: {
audio: {
url: 'swf/flowplayer.audio-3.2.2.swf'
},
controls: null
}
// install HTML controls inside element whose id is "hulu"
}).controls("footer", {
// CSS class name for the playhead
playHeadClass: 'playhead',
// CSS class name for the track
trackClass: 'track',
// CSS class name for the playhead when in a playing state
playClass: 'play',
// CSS class name for the playhead when in a paused state
pauseClass: 'pause',
// CSS class name for the buffer bar
bufferClass: 'buffer',
// CSS class name for the progress bar
progressClass: 'progress',
// CSS class name for the time display
timeClass: 'time',
// CSS class name for mute button
muteClass: 'mute',
// CSS class name for the unmute button
unmuteClass: 'unmute',
// a default duration for the time display in seconds
duration: 0
});
};
If it is an issue with the duration of mp3 file, please advice me how to calculate it in JS and supply to the player.
EDIT: I have added the screenshot below: