For fancybox 3, I can manually create a group of objects with a pattern
{
src : '' // Source of the content
type : '' // Content type: image|inline|ajax|iframe|html (optional)
opts : {} // Object containing item options (optional)
}
How can I specify srcset in this case for display different images based on viewport width?
You can use image.srcset option to set srcset attribute, example:
$.fancybox.open({
src : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720',
type: 'image',
image : {
srcset : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=large_1600%C3%97800&w=1600&h=960 1600w, https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720 1200w, https://placeholdit.imgix.net/~text?txtsize=33&txt=small_640%C3%97427&w=640&h=384 640w'
}
});
Demo - https://codepen.io/anon/pen/aRWpQp?editors=1010
Note: there is an inconsistency across browsers about how this should work, for example, try that demo using Chrome and Firefox, and try resizing window. Firefox works as you might expect but Chrome probably not. Therefore it is planned for v4 to implement responsiveness a bit differently.
So far, I've found a temporary solution. In JSON I added srcset:
var gallery = {
"src" : "https://source.unsplash.com/random/400x300",
"srcset" : "https://source.unsplash.com/random/400x300, https://source.unsplash.com/random/800x600 2x"
}
Then used afterLoad:
$.fancybox.open(gallery, {
afterLoad: function (instance, slide) {
if (slide.srcset)
slide.$slide.find(".fancybox-image").attr("srcset", slide.srcset);
}
});
Everything seems to be working correctly.
Demo - https://codepen.io/anon/pen/oaWBMe?editors=1010
If I am wrong, please correct.
Related
Here is my problem :
- i have an fancybox 3 gallery intro an iframe
- when i click to one of the link, i would like the image showing on top of the parent of my iframe
I have made many researches and tried several solutions
I found this : call Fancybox in parent from iframe
but it only provide a solution for fancybox 2
Here is my code on the iframe :
$(document).ready(function() {
parent.$(".fancybox").fancybox({
href: this.href
});
});
Please note
i have included jquery and fancybox 3 both in the iframe and the parent
fancybox works like a charm independently in the iframe and the parent, but cannot be called from the iframe to be displayed in the parent (my problem)
i have also tried :
$(".fancybox", top.document).fancybox
$(".fancybox", window.opener.document).fancybox
$(".fancybox", window.parent.document).fancybox
None of these worked
Thank you very much for your attention
I hope you red the docs while doing "many researches". From the docs:
To access and control fancybox in parent window from inside an
iframe:
// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();
This should give you a clue that you can use parent.jQuery.fancybox to use API from the parent page.
Then, API section should give you a clue how to open image gallery programmatically:
$.fancybox.open([
{
src : '1_b.jpg',
opts : {
caption : 'First caption',
thumb : '1_s.jpg'
}
},
{
src : '2_b.jpg',
opts : {
caption : 'Second caption',
thumb : '2_s.jpg'
}
}
], {
loop : false
});
So, combining these two snippets should give you the answer.
I'm new to protractor and I want to check some css properties. I'm doing it like this (CoffeeScript):
element.all(By.css(".my-picture")).then (pictures) ->
for picture in pictures
picture.getCssValue("border-radius").then (value) ->
console.log value
The above code does not print anything. I can get properties like "display" or "color", but no "border-radius".
According to this documentation, it seems that getCssValue just works with CSS2 specification. And according to CSS2Properties doc, border-radius does not exists!
Now, I realize that border-radius is a CSS3 property. But the question remains, how can I test it using protractor?
element.all(by.css('.my-picture')).then(function (pictures) {
for (picture in pictures) {
browser.executeScript(function (domPicture) {
var style = window.getComputedStyle(domPicture);
return style.getPropertyValue('border-radius');
}, picture.getWebElement()).then(function (borderRadius) {
console.log(borderRadius);
});
}
});
Please help me in this problem.. why my j-flow slider does not working correctly.. I coy code by j-flow demo.. Please check my given link:
https://dl.dropboxusercontent.com/u/103234001/test/index.html
may be my document ready function have some problem. But I don't know,whats wrong with me..
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "940px", // this is the width for the content-slider
height: "300px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
You're trying to load jquery from http on an https. jQuery is not getting loaded. Best solution is to use a local version of jquery and refer to it like the rest of your scripts. otherwise you can include jquery like google libraries specifies...
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
note the lack of http or https
using your browsers debugging tools makes issues like this easy to spot.
Yes, I have been here: CSS Sprite not working
No, I don't get it. What does he mean by 'points'?:
"In other words:
For each ID value, apply 100 points
For each class value (or pseudo-class or attribute selector), apply 10 points
For each element reference, apply 1 point"
What are these 'points'? I read the articles and I get that there is order in specifying CSS codes, but I still don't understand. Right as this is I am only getting the very first sprite in the set. FYI-I used a sprite generator. (This one to be exact)
You can view the source code here. I would suggest zooming in on your browser to see everything properly.
Ricky: The img tag is occluding the background. I recommend changing it to a div. Also, you didn't include the NOS object in your code. Here's what I came up with:
<script>
var NOS = {
itemno: 0,
menuClasses: [
'img-blog',
'img-files',
'img-forums',
'img-login',
'img-logout',
'img-mail',
'img-news',
'img-profile',
'img-reg',
'img-settings',
'img-shop',
'img-status'
],
toggle: function() {
$('#menuimg').removeAttr('class').addClass(function() {
++NOS.itemno;
if (NOS.itemno > NOS.menuClasses.length - 1) {
NOS.itemno = 0;
}
return NOS.menuClasses[NOS.itemno];
});
}
}
</script>
I am using SimpleModal and i am opening an Iframe (using ff)
it seems to work ok in ie9 but in ff it is calling the iframe src twice
Thanks for any help
the code i am calling looks like
function addNew(){
var src = "/php/ftp/parsehome.php?dir="+userDir+"&idx=new";
$.modal('<iframe src="' + src + '" height="445" width="800" style="border:0">', {
containerCss:{
backgroundColor:"#E1EFF7",
borderColor:"#00A99D",
height:450,
padding:0,
width:840
},
modal: true
});
}
I ran into the same problem. Looking at the plugin code...
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}))
.appendTo('body');
data = null;
You can see the data is added to the page body with the line .appendTo('body'); to calculate the correct dimensions for the modal. If you comment out this line, it will prevent the iframe being called twice.
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}));
data = null;
Not sure if this modification will cause your modal size to have the wrong dimensions, but my iframe was set to width=100% and height=100% so didn't affect me.