I wondered if you can add more than three images to a jQuery Backstretch slideshow, I have three images rotating but it wont pick up a fourth, see code;
$('document').ready(function () {
$.backstretch([
"images/img1.jpg"
, "images/img2.jpg"
, "images/img3.jpg"
, "images/img4.jpg"
], {duration: 3000, fade: 1250});
Thanks
Related
I am working on an encoding flow that adds an overlay image to the video. I want this watermark to be in the bottom right corner. No matter what I try with the position parameter, the watermark is positioned in the top left.
Can someone point me to a sample that covers that scenario? The Microsoft docs and samples are vague about positioning the overlay and setting the opacity.
Here is a snippet of code that contains my transform definition. Regardless of the overlay settings, I can use any values for the rectangle position element and nothing changes. The watermark ends up in the upper right of the video. Its like the position and opacity properties are being ignored.
new AMSModels.TransformOutput(
new AMSModels.StandardEncoderPreset(
filters: new AMSModels.Filters
{
Overlays = new List<AMSModels.Overlay>
{
new AMSModels.VideoOverlay()
{
InputLabel = "tbvvideooverlay",
Opacity = .5,
Position = new AMSModels.Rectangle(){ Left = "100", Top = "100", Width = "100", Height = "100"} //**I've tried all types of values here including percentages, nothing changes when I reencode the video.**
}
}
},
codecs: new AMSModels.Codec[]
{
// Add an AAC Audio layer for the audio encoding
new AMSModels.AacAudio(
channels: 2,
samplingRate: 48000,
bitrate: 128000,
profile: AMSModels.AacAudioProfile.AacLc
),
// Next, add a H264Video for the video encoding
new AMSModels.H264Video (
// Set the GOP interval to 2 seconds for all H264Layers
keyFrameInterval:TimeSpan.FromSeconds(2),
// Add H264Layers. Assign a label that you can use for the output filename
layers: new AMSModels.H264Layer[]
{
new AMSModels.H264Layer (
bitrate: 3600000, // Units are in bits per second and not kbps or Mbps - 3.6 Mbps or 3,600 kbps
width: "1280",
height: "720",
label: "3600" // This label is used to modify the file name in the output formats
),
new AMSModels.H264Layer (
bitrate: 1600000, // Units are in bits per second and not kbps or Mbps - 1.6 Mbps or 1600 kbps
width: "960",
height: "540",
label: "1600" // This label is used to modify the file name in the output formats
),
new AMSModels.H264Layer (
bitrate: 600000, // Units are in bits per second and not kbps or Mbps - 0.6 Mbps or 600 kbps
width: "640",
height: "360",
label: "600" // This label is used to modify the file name in the output formats
),
}
),
// Also generate a set of PNG thumbnails
new AMSModels.PngImage(
start: "10%",
step: "10%",
range: "90%",
layers: new Microsoft.Azure.Management.Media.Models.PngLayer[]{
new AMSModels.PngLayer(
width: "100%",
height: "100%"
)
}
),
new AMSModels.JpgImage(
start: "10%",
step: "10%",
range: "90%",
layers: new Microsoft.Azure.Management.Media.Models.JpgLayer[]{
new AMSModels.JpgLayer(
quality: 100,
width: "100%",
height: "100%"
)
}
)
},
// Specify the format for the output files - one for video+audio, and another for the thumbnails
formats: new AMSModels.Format[]
{
// Mux the H.264 video and AAC audio into MP4 files, using basename, label, bitrate and extension macros
// Note that since you have multiple H264Layers defined above, you have to use a macro that produces unique names per H264Layer
// Either {Label} or {Bitrate} should suffice
new AMSModels.Mp4Format(
filenamePattern:"{Basename}_{Resolution}_{Bitrate}{Extension}"
),
new AMSModels.PngFormat(
filenamePattern:"Thumbnail-{Basename}-{Index}{Extension}"
),
new AMSModels.JpgFormat(
filenamePattern:"Thumbnail-{Basename}-{Index}{Extension}"
)
}
),
onError: AMSModels.OnErrorType.StopProcessingJob,
relativePriority: AMSModels.Priority.Normal
)
};
string description = "A simple custom encoding transform with 2 MP4 bitrates";
// Create the custom Transform with the outputs defined above
transform = await client.Transforms.CreateOrUpdateAsync(resourceGroupName, accountName, transformName, outputs, description);
}
Thank you!
Thank you very much for identifying this concern and pointing it out. We took a look at this and have confirmed that there is indeed a bug that you have found here! First off, thank you for finding this issue and reporting it.
Now the bad news, right now we are going to have to look at fixing that and redeploying a fix to production. That could take some time on our side, so if you are in need of a quick solution the only thing I can suggest is to use the older v2 API (yes, the one we announced deprecation on) to work around this issue until we can get a code fix out to production.
Here is the older method of doing this in v2 if that works for you - https://learn.microsoft.com/en-us/azure/media-services/previous/media-services-advanced-encoding-with-mes#overlay
Thanks for confirming this. I've already migrated and committed to v3 so turning back would be messy.
I am still working on it, but I do have a workaround that will get me by. If I make and image the same size as my largest video size, I can then position the watermark in the bottom right in that image. As long as its a transparent PNG, it "looks" like the watermark is bottom right justified.
I have to put this solution to the test across all the video assets I have, but so far I think it will work until the patch above will work. Once that is fixed, I plan on allowing our users to pick from a variety of watermarks.
Thanks again!
Eric
I am try to add cropper.js in semantic modal. i am doing following step.
1) I have button on page called [Choose image]
2) If i am click on choose image one modal is open name is [thumbs].
thumbs modal have 2 button [choose from local pc] and [choose media].
3) If i am click on choose from local pc file dialog is open and image picker is working and cropper.js is assign to selected image perfect
4) If i am click on choose media button they open [media] modal and i have lots of images there and i have one button on each image if i am click on image path is pass to previous modal called thumbs and cropper tool is assigned but size is smaller as given size, if i am open inspect element of chrome cropper size is perfect.
You will better idea using following images.
http://prnt.sc/cnof60
http://prnt.sc/cnofei
http://prnt.sc/cnofne
http://prnt.sc/cnofxs
If see last 2 images you can difference in image.
I am using https://fengyuanchen.github.io/cropperjs/ for cropper function.
Thanks
When you init your cropper pass minContainerWidth and minContainerHeight. here i am passing 846 and 280.
var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
dragMode: 'move',
autoCropArea: 1,
cropBoxMovable: false,
cropBoxResizable: false,
viewMode: 3,
minContainerWidth: 846,
minContainerHeight: 280,
crop: function(e)
{
var image_data = e.x +"#"+ e.y +"#846#280";
$("#img-preview-media-web-image-data").val(image_data);
}
});
and in cropper.js file change following line
/*$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/
$cropper.css((this.container = {
width: options.minContainerWidth ,
height: options.minContainerHeight
}));
Line number 806 to 809 in cropper js
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
I am building a pretty good JSSOR slide show, with what must be recognized as very good support by jssor on StackOverflow. I'm also completely amazed that the best slideshow program in the world is free.
My slideshow does a "chess mode" type animation mode on every slide. What I am looking for is a variety of transition modes (I call them transition modes, but maybe that is the wrong term?).
Example:
"ChessMode" slide show
But I want something more like this:
JSSOR image-gallery demo
I think the secret lies in the _SlideshowTransitions array values, but I don't know what the full range of possibilities are, or how to make multiple effects modes within one slide show.
These are my _SlideshowTransitions settings:
var _SlideshowTransitions = [{
$Duration: 600,
$Delay: 50,
$Cols: 8,
$Rows: 4,
$FlyDirection: 5,
$Formation:
$JssorSlideshowFormations$.$FormationZigZag,
$Assembly: 1028,
$ChessMode: { $Column: 3, $Row: 12 },
$Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad },
$Opacity: 2
}];
I see you use only one transition, please use more transitions in following manner,
var _SlideshowTransitions = [
{ code1 },
{ code2 },
{ code3 },
...
];
Get transition code at http://www.jssor.com/development/tool-slideshow-transition-viewer.html
In the examples page when you search (CTRL+F) for image gallery and click the first image, there's this image gallery which you can browse with next/prev arrows. The animation between them is vertical -- the images fly vertically. How does one set them to fly horizontally?
In the help I found:
openMethod / closeMethod / nextMethod / prevMethod
Method from $.fancybox.transitions() that handles transition (you can
add custom effects there)
But I don't know where to go from here.
Also, this seems to be slightly related.
You can create your own custom transitions from here:
http://jsfiddle.net/xZBBS/
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
try this i am sure this will help