Slideshow RWD with full width

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
bayernalbert
 
 
Posts: 20
Joined: Thu Oct 16, 2014 10:00 am

Slideshow RWD with full width

Post by bayernalbert » Sun Oct 19, 2014 5:47 am

Which slideshow is best/suitable for WB10 with full browser width but not a fullscreen size (full width & full height)?
The slideshow should be able to vary the height due to the different breakpoints but always with full browser width. Thank you!

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Slideshow RWD with full width

Post by Pablo » Sun Oct 19, 2014 7:23 am

The built-in slideshow is 'responsive', this means that you can use the same slideshow in different breakpoints with different sizes.
However 'full width' will always be full width.

bayernalbert
 
 
Posts: 20
Joined: Thu Oct 16, 2014 10:00 am

Re: Slideshow RWD with full width

Post by bayernalbert » Sun Oct 19, 2014 11:32 am

Thanks Pablo. If I create a slideshow with the built-in slider there are 3 possibilities for fullscreen:

Contain: the slideshow is shown in the vertical middle of the browser, despite I put the slideshow on position 0,0.
How can a position the images (the slideshow) to the position I would like to have?

Cover: fullscreen (full width & full height), is not what I´d like to have.
Stretch: the images are stretched, is not what I´d like to have.

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Slideshow RWD with full width

Post by Pablo » Sun Oct 19, 2014 12:01 pm

The definition of 'cover' is:
Scale the image to be as large as possible so that the area is completely covered by the image. Some parts of the image may not be in view within the area
Stretch will use the complete page.

If both option are not what you are looking for then you need to look for an alternative slideshow.


User avatar
Dorco
 
 
Posts: 82
Joined: Fri Jan 24, 2014 2:40 pm

Re: Slideshow RWD with full width

Post by Dorco » Mon Oct 02, 2017 9:14 am

Pablo wrote:
Sun Oct 19, 2014 7:23 am
The built-in slideshow is 'responsive'
But it loads all images everytime, even it is not shown... Isn't it?
We ar doooogs... We ar workin, workin an workin.... We ar doooogs...

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Slideshow RWD with full width

Post by Pablo » Mon Oct 02, 2017 10:17 am

But it loads all images everytime, even it is not shown... Isn't it?
I think most slideshows work like that.
Animations do not work unless the images are preloaded.

User avatar
[RZ]
 
 
Posts: 2440
Joined: Tue Nov 04, 2008 12:08 pm

Re: Slideshow RWD with full width

Post by [RZ] » Mon Oct 02, 2017 10:22 am

as it has been said, most of the well scripted slideshows load their images as soon as possible (and unsynchronously if possible), otherwise, when they become visible annoying interruptions (mainly due to the startup and loading processes) are very noticeable

User avatar
Dorco
 
 
Posts: 82
Joined: Fri Jan 24, 2014 2:40 pm

Re: Slideshow RWD with full width

Post by Dorco » Mon Oct 02, 2017 11:53 am

Pablo wrote:
Mon Oct 02, 2017 10:17 am
I think most slideshows work like that. Animations do not work unless the images are preloaded.
Sorry, I tried to say that when slideshow is totally hidden in a breakpoint, it leaves IMG tags in HTML and browser loads its images anyway.

This makes it sometimes unacceptabble for using (for example, big images are unwanted at a small display resolution). And I don't know how it can be dealed. A `responsive` element has to leave its images in a @media part of CSS, not HTML itself.

If different images are designed in slideshow for different breakpoints, browser will load it all everytime. Absolutely all, absolutely everytime, making a page incredible big with all assets loaded. This is not a responsive behaviour, I think.
Last edited by Dorco on Mon Oct 02, 2017 12:05 pm, edited 1 time in total.
We ar doooogs... We ar workin, workin an workin.... We ar doooogs...

User avatar
Pablo
 
Posts: 19645
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Slideshow RWD with full width

Post by Pablo » Mon Oct 02, 2017 12:05 pm

A `responsive` element has to leave its images in a @media part of CSS, not HTML itself.
You cannot use media queries to stop images <img> form loading . This only works for CSS not for HTML.

And I strongly doubt you will find any other editor of slideshow script that supports this functionality. So it is not so obvious as you make it sound.

User avatar
Dorco
 
 
Posts: 82
Joined: Fri Jan 24, 2014 2:40 pm

Re: Slideshow RWD with full width

Post by Dorco » Mon Oct 02, 2017 12:11 pm

If we make a div with background image, we can change its properties in @meda part quite easily:
https://stackoverflow.com/questions/196 ... ia-queries
We ar doooogs... We ar workin, workin an workin.... We ar doooogs...

User avatar
[RZ]
 
 
Posts: 2440
Joined: Tue Nov 04, 2008 12:08 pm

Re: Slideshow RWD with full width

Post by [RZ] » Mon Oct 02, 2017 12:16 pm

this is something pretty different
an img element is to display an image and its resource must be loaded
a div can also display an image as a background, but it is an attribute and not a required resource
hence, a div can have different attributes (an image as background, a color as background, borders, etc) across breakpoints

User avatar
Dorco
 
 
Posts: 82
Joined: Fri Jan 24, 2014 2:40 pm

Re: Slideshow RWD with full width

Post by Dorco » Mon Oct 02, 2017 12:21 pm

Anyway, I think, that it can be dealed with a php script, that sets different image urls for the slideshow in different cases. But in this case we have to reload page after changing page's width... And this can be dealed with the help of javascript - just monitor width of page and change urls in the slideshow.
We ar doooogs... We ar workin, workin an workin.... We ar doooogs...

User avatar
Dorco
 
 
Posts: 82
Joined: Fri Jan 24, 2014 2:40 pm

Re: Slideshow RWD with full width

Post by Dorco » Wed Oct 04, 2017 8:55 am

Solution for slideshow plugin using images of different size

Uses pure javasrcipt and tested on latest FF, Chrome and IE11.

1. Give a name for images of minimal size (like thumbnails) with numbers within, like 'rose-400.jpg'.
2. In WWB set up thumbnails in the slideshow plugin. Thumbnails will be loaded in any case, everytime.
3. Give the exact names for images of the bigger size, but put another number in there (let it be 800px for example), like 'rose-800.jpg'.
4. Put `file publisher` object in WWB on the page, let it publish our bigger sized images at the same directory with thumbnails ('/images' by default).

So we have two versions of images in this example in '/image' folder: rose-400.jpg and rose-800.jpg. The first one will load everytime and the second - only if the width of the browsers's window is more, than we have defined (in code below).

5. Put at the end of the page the following script (before '</body>' tag, for example), where 'SlideShowX' = ID's of slideshows used on the page:

Code: Select all

<script type="text/javascript">
var p800=0; // global variable: 'are big images already loaded?'
function setHighRes(id)
{
	var a=document.getElementById(id).getElementsByTagName('li');
	for(var i=0; i<a.length; i++)
		if(a[i].nodeType==1)
			a[i].innerHTML=a[i].innerHTML.replace('400','800'); // replace '400' in file names with '800', set yours or whatever
}
function checkWindowWidth()
{
	if(document.body.clientWidth>1100) // if width is wider than 1100px (set your own), we will load big images by renaming urls
	{
		setHighRes('SlideShow1');
// ...
		setHighRes('SlideShow9');
		window.p800=1; // Remember that bigger images are already loaded
	}
}

// This function is for waiting some time after resizing in browser occured for correct updating of the page's internal HTML of our objects:
var waitForFinalEvent=(function(){
	var timers={};
	return function(callback,ms,uniqueId)
	{
		if(!uniqueId)		uniqueId="Don't call this twice without a uniqueId";
		if(timers[uniqueId])	clearTimeout(timers[uniqueId]);
		timers[uniqueId]=setTimeout(callback, ms);
	};
})();

window.onresize=function(event)
{
// we will wait 500ms in order to let browser to complete resizing of our page
// (maximize and minimize buttons in FF caused early wrong refreshes with incorrect page displaying)
	if(window.p800==0) // big images aren't loaded yet
		waitForFinalEvent(function(){
			checkWindowWidth();
		}, 500, "some unique string"); // unique string is only for any-in-code-else using of waitForFinalEvent function
};
window.onload=checkWindowWidth(); // check width of the window as the page is loaded and set images names to other resolution if needed
</script>
This solution makes Slideshow object more 'responsive', vastly saving time (by deciding about big images loading necessity), making it more usefull for gadjets with small width of screen. Indeed, it loads thumbnails everytime, but it is also a plus even for wide screens: thumbnails are quickly shown and user may interact with the page while big images are still being loaded.

The minus is mostly for searching engines: hard to predict if big images may be used. But many slideshows works in that way.
We ar doooogs... We ar workin, workin an workin.... We ar doooogs...

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests