Hi guys,
I really love your plugin set, and I use it extensively in the websites I build. The PageBuilder and the Widget Bundle seems to improve every day, and I’m very happy with it.
However, there is something I miss about the cycle-slider plugin (which i coded) that I was using before, and I think it would be very useful to integrate it the Site Origin Hero and Slider widgets: true fullscreen images.
At the time, I’ve done it via a small jquery function that collected viewport width and height, setting them to a specific container around the slides: it’s quite simple and I think many of us would really like to see a checkbox “Use viewport W and H” within the widget options!
Only in this way the image will really fill the viewport, as values like wh/vh via CSS often bring unwanted behaviour on mobile browsers.
I would really appreciate if you could consider to implement this feature in future releases!
Hi Frafor,
I’ve marked this thread as a feature request. We often look through these threads to get ideas for what to add in our future updates. Hopefully, we’ll be able to add this in a future update. With that said, you should give creating this functionality a try. The sliders in SiteOrigin Page Builder all use Cycle (admittedly Cycle2) so you should be familiar with that part.
Modifying existing widgets is also pretty easy to do with the Widgets Framework included with the SiteOrigin Widgets Bundle and that’s the hardest part (read: it’s not). I would be more than willing to answer any questions you have with creating this functionality / plugin. :)
Hi Alex!
In fact I already have some code that I usually apply to the Cycle2 plugin. That’s why I adapted it to work with the Hero widget. Here it is.
// The code below is used to set Cycle2-based slideshow at full page height, while preventing element's height recalculation for small changes in viewport (such as address bar in mobile browsers appearing/disappearing) // written by ffd-web / frafor // thanks to SpYk3HH @StackOverflow /* simple method to get the current window size as an object where h=height && w=width */ function getWindowSize() { return { h: jQuery(window).height(), w: jQuery(window).width() }; } function doWork(typ) { if (typ == 'h') setCycleHeight(); else if (typ == 'w') setCycleHeight(); // a change was made, now to reset window.sizeCheck = getWindowSize(); } function setCycleHeight() { var currentH = jQuery(window).height(); jQuery(".fullheight-slider .sow-slider-images, .fullheight-slider .sow-slider-image").height(currentH); } function windowResize() { // Set deltas of +-90px and +-60px to trigger resizes // sch=sizeCheck, scu=sizeCurrent var sch = window.sizeCheck, // get previously set size scu = getWindowSize(), maxH = sch.h + 90, minH = sch.h - 90, maxW = sch.w + 60, minW = sch.w - 60; if (scu.h > maxH) doWork('h'); else if (scu.h < minH) doWork('h'); if (scu.w > maxW) doWork('w'); else if (scu.w < minW) doWork('w'); } jQuery(function() { window.sizeCheck = getWindowSize(); setCycleHeight(); jQuery(window).resize(function(e) { if (this.tmrResize) clearTimeout(this.tmrResize); this.tmrResize = setTimeout(windowResize, 250); }); }); });Then I make a new row with a Hero widget inside, and give the class .fullheight-row to that row. In this way I can use different Hero widgets without resizing all of them!
(sorry, the class I add to the row is obviously
)