Menu icon Foundation

Developer

My Posts





My Comments

Char Zango commented on Char Zango's post almost 6 years

I looked briefly at a few css options too (timers exist -- timer controls would be even worse), but they were incomplete for this purpose (e.g., didn't work in a responsive environment), or mainly: would take me too long to implement in a reliable fashion.

Time is money :)

Char Zango commented on Char Zango's post almost 6 years

Hi Rafi,

It's a converted powerpoint slideshow. Yes, I'm attempting to use orbit to handle it. I'm (currently) trying with one image per slide. And I'm using a fullscreen api (http://brad.is/coding/BigScreen/) to throw the containing div into fullscreen at the click of a button.

I was wondering how other people (orbit gurus) might have handled scaling of images where they might go from dimensions of 320x240 (when in a column) up to 1600x1200 (when full screen).

If you scale 320x240 up to 1600x1200 in the browser, then it doesn't look that fantastic. But large images have an (unnecessarily?) large file size.

My designer experience is limited so I'm wondering how this scenario is usually handled. Is there a CSS related fix or should I parse the img tags and toggle the filenames from slide01-small.jpg to slide01-large.jpg when it jumps into fullscreen mode.

Is that clearer? I guess this was a 'best practice' question so that I could avoid any amateur designer hacks... if a best practice exists for scaling images. And if it has been dealt with in the case of orbit.

Char Zango commented on Char Zango's post almost 6 years

Thanks Rafi,

Not the answer I was hoping for but now at least I know where I'm starting. If it helps anyone else, here are some other (jquery) timers that I might try

https://github.com/aterrien/jQuery-Knob
http://blakek.us/labs/jquery/css3-pie-graph-timer/

Char Zango commented on Char Zango's post almost 6 years

I've been thinking/looking around and will probably go with a javascript solution if nothing exists to handle font-scaling inside foundation.

e.g.,

Something like this (http://jsfiddle.net/8TrTU/):
$(document).ready(function() {
var fontSize = parseInt($("#container").height())+"px";
alert(fontSize);
$("#container span").css('font-size', fontSize);
});

Char Zango commented on Char Zango's post almost 6 years

Cool, thanks. I think this should be an enhancement rather than an annoyance, for people watching the slideshow.

Posts Followed

  • 30
    Replies
  • Orbital Height Issues

    By Greg Blass

    Orbitsliderheight

    For some reason, orbital doesn't seem to adjust to the right height when I load my page. It either has a height of 0px, or just enough height to match the height of the bullets (when I enable them). As soon as I resize my browser (or open dev tools), i... (continued)

    Last Reply by jessica ndaye almost 5 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Char Zango's post almost 6 years

I looked briefly at a few css options too (timers exist -- timer controls would be even worse), but they were incomplete for this purpose (e.g., didn't work in a responsive environment), or mainly: would take me too long to implement in a reliable fashion.

Time is money :)

You commented on Char Zango's post almost 6 years

Hi Rafi,

It's a converted powerpoint slideshow. Yes, I'm attempting to use orbit to handle it. I'm (currently) trying with one image per slide. And I'm using a fullscreen api (http://brad.is/coding/BigScreen/) to throw the containing div into fullscreen at the click of a button.

I was wondering how other people (orbit gurus) might have handled scaling of images where they might go from dimensions of 320x240 (when in a column) up to 1600x1200 (when full screen).

If you scale 320x240 up to 1600x1200 in the browser, then it doesn't look that fantastic. But large images have an (unnecessarily?) large file size.

My designer experience is limited so I'm wondering how this scenario is usually handled. Is there a CSS related fix or should I parse the img tags and toggle the filenames from slide01-small.jpg to slide01-large.jpg when it jumps into fullscreen mode.

Is that clearer? I guess this was a 'best practice' question so that I could avoid any amateur designer hacks... if a best practice exists for scaling images. And if it has been dealt with in the case of orbit.

You commented on Char Zango's post almost 6 years

Thanks Rafi,

Not the answer I was hoping for but now at least I know where I'm starting. If it helps anyone else, here are some other (jquery) timers that I might try

https://github.com/aterrien/jQuery-Knob
http://blakek.us/labs/jquery/css3-pie-graph-timer/

You commented on Char Zango's post almost 6 years

I've been thinking/looking around and will probably go with a javascript solution if nothing exists to handle font-scaling inside foundation.

e.g.,

Something like this (http://jsfiddle.net/8TrTU/):
$(document).ready(function() {
var fontSize = parseInt($("#container").height())+"px";
alert(fontSize);
$("#container span").css('font-size', fontSize);
});

You commented on Char Zango's post almost 6 years

Cool, thanks. I think this should be an enhancement rather than an annoyance, for people watching the slideshow.

Posts Followed


Following

  • No Content

Followers

  • No Content