WebSite X5Help Center

 
Tom G.
Tom G.
User

Code to scale the background image – by KolAsim  en

Autor: Tom G.
Besucht 1679, Followers 1, Geteilt 0  

This is a question regarding the code, KolAsim wrote to scale the background image for different resolutions, see the post Incorrect background image displayed on iPhone/iPod

On one of the pages, I would like to use the Image List (sequence of images) as shown below:

                 

How should I change the code you provided, that would work with Image List? The code seems to be working without changes, but I want to be sure…

Thank you in advance for your response!

Gepostet am
23 ANTWORTEN - 1 NüTZLICH - 1 KORREKT
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

Hello,
1) ... I need the LINLK of your simple example published on the net, with the slideshow in a row, so that I can evaluate, as you did for the previous example ...
...
2) ... or you could put a still image in the row, and create and publish the slideshow in independent page, with maximage, tympanus, vegas, etc ... then I will give you a very simple code of my invention and simplicity unique, (DIV_CUSTOM + IFRAME), (copy / paste) ...
... rest awaiting the LINK of p.1), and / or also p.2)
Hello

(IT) Ciao,
1) ... mi serve il LINLK del tuo esempio semplice pubblicato in rete, con lo slideshow in una riga, in modo che possa valutare, come avevi fatto per l'esempio precedente...
...
2) ... oppure potresti mettere una immagine fissa nella riga, e realizzare e pubblicare lo slideshow in pagina indipendente, con maximage, tympanus, vegas, eccetera;...poi io ti fornirò un codice semplicissimo di mia invenzione e di una semplicità unica, (DIV_CUSTOM+IFRAME), (copia/incolla)...
... resto in attesa del LINK del p.1), e/o anche del p.2)
ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

Thank you KolAsim for the quick answer!

Here is the link: Page with Image List

I've changed (in page's Row Formats) the single Image into Image List and (as you can see) it works with the code you gave me for single image!

Mehr lesen
Gepostet am von Tom G.
Tom G.
Tom G.
User
Autor

... and

Is there a way to set time interval for image changes?

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... creates a clean project, without extra codes that create errors, for example
  "animate Magda and Susanne picture", and then I can check ...

(IT) ... crea un progetto pulito, senza codici extra che creano errori, come per esempio
"animate Magda and Susanne picture", e poi potrò verificare...

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Hi G. Thomas,

if it can help you I created the effect of the Image List (or sequence of images) in the Row Style, making it responsive, without the use of any extra-code, only using almost square images. The images used by me in the example below are 1920 x 1600 px (almost square). What is important is the height and width of the images!!
The online example is here, try narrowing and enlarging the browser window:


http://www.bozzasito001.altervista.org/stilerighe01/stile-righe-responsive.html

Mehr lesen
Gepostet am von Giuseppe Guida
Tom G.
Tom G.
User
Autor

@KolAsim,

I removed all code from the HOME page, the one with Image List.

I hope, this is what you needed...

@Guiseppe,

The page you created looks very nice! Can you give the instructions, please?

Mehr lesen
Gepostet am von Tom G.
Giuseppe Guida
Giuseppe Guida
User

G. Thomas, I explained everything to you in my previous message: to get that effect, the dimensions of the images are important. The images must have a width of 1920px (non less!) and a height not less than 1500/1600 px. I did nothing else on that project

Mehr lesen
Gepostet am von Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
G. Thomas
@KolAsim, I removed all code from the HOME page, the one with Image List. I hope, this is what you needed... . .. ... ... ...

... hello, I saw that you have eliminated the errors in the code, OK ...
... I will look at the possible solutions in the evening with my exclusive code ...
... and then I'll let you know either tonight or tomorrow ...
.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

1)> ... paste in the Expert section, before the closing of the / HEAD tag, >> this code  (temporary!)
2)> ... paste in the Expert section, before the closing of the / BODY tag, >> this code  (temporary!)

Hello - ciao

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

Thank you, KolAsim!

The code you provided works great!

Two questions:

1. What is the meaning of the highlighted line (see below)?

I realized that without this line the images do not display at all.

and

2. Is there a way to set time interval for image changes?

Thanks!

Tom

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
G. Thomas
... ... 1. What is the meaning of the highlighted line (see below)? ... ...

(google IT > EN) - sorry, ... you have to delete the string: #imPageRowGraphics_1_2   ...!!!...

G. Thomas
... ...2. Is there a way to set time interval for image changes? ... ... 
 ... to set a range for slideshow images, you should reprogram it, and it's not worth it ...
... much better would it be, create a slideshow independent from the WebSiteX5 project, .. and publish it directly on the net;
... you can use any method available on the net that is easy and friendly, but this will only depend on you, and that's my favorite method; ... for example, all very simple, you can try with:
maximage2, vegas, tympanus, jssor, sorgalla, flexslider, amazingslider, wowslider, ...etc. .. . .
... once you have published your slideshow on the web, then with my simple method/invention, and with a simple copy/paste, you can incorporate in the project and in any section you want to insert ...
... for example, and to try immediately, delete all previous codes, and paste this > code ...  (temporary!)
... then in case we'll talk again ...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

I have tried your slide show on my page (replacing the code) and it really looks great.

Question: When I create my slideshaw outside of WSX5, how do I add it in our sofrware?

Also: when removed the line mistakenly left in the code, no image appear anymore. Funny - I put this line back in and everything is fine.

Attached is the code you gave me with the line commented out.

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator


... this >> code works;
... then delete my images and restore your images removed at the beginning (//)
...

...
... for the other method, post the link of the extra slideshow ...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

Thank you, KolAsim! The code works!

Even though the slide show works within the WSX5, I will try to learn how to create one outside the software. I'll post any questions I have later.

Thanks! You are THE BEST!

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

OK, in case we will meet in another new topic ...
..................
... I anticipate that with MAXIMAGE used in my exclusive method, it would be easy to customize the seconds for the interval of the images and also the speed of the fade ...
Hello ...  ciao ... wink

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

KolAsim, based on your page with MaxImage full screen slide show, I created this page

You promised to provide the code to implement (in responsive way) MaxImage 2.0 slideshow in my page , replacing Image List.

Thank you in advance!

Tom

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator


... OK ...
... if you want to use your extra slide show right away, paste this > code  and finish...wink 
...........
... to be able to temporize you have to use some of my variants to the code ...
1) - delete the slideshow from the background of the RIGA row;
2) - insert as single line a single image, without a slideshow;
3) - then for the HTML page of the slideshow use this >> code, ...
4) - to be combined with >> this jquery.maximage.js  (*)  to download and replace the previous one you used ...
5) - publish the new page of points 1) and 2) and the new slideshow of points 3) and 4);

(*) - Ctrl+U  variants to the code row 259-260

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

Thanks, KolAsim! It works great!

Question: there is a variable spedOpacityK:

spedOpacityK = 4;    // seconds fade - less than speedDelayK
spedOpacityK = spedOpacityK * 1000;

I don't see it being used anywhere... Am I missing something?

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

G. Thomas
... ...Question: there is a variable spedOpacityK: spedOpacityK = 4;    // seconds fade - less than speedDelayK spedOpacityK = spedOpacityK * 1000; I don't see it being used anywhere... Am I missing something?  ... ...

... Yes >>

KolAsim
... ... 4) - to be combined with >> this jquery.maximage.js  (*)  to download and replace the previous one you used ... .... .... ... (*) - Ctrl+U  variants to the code row 259-260 ... ...

(*) - >> jquery.maximage.js >> Ctrl+U  variants to the code row 259-260

// ===================KolAsim=============================
$('.slide-'+lastSlide).css({'z-index':opts.zIndex-1}).fadeOut(spedOpacityK);
$('.slide-'+currentSlide).css({'z-index':opts.zIndex}).fadeIn(spedOpacityK);
//======================================================

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

OK,
I visited your page and it works correctly, and the background does not flow like it was with your first slideshow, but remains fixed (smartphone)...
... as you will have understood, the merit of this code invented by me, is that it is very simple and at the same time very powerful, ... besides being widely flexible and updatable without touching the program ...
Hello - ciao wink

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

It was great lesson for me. Being (retired already) a programmer for over 40 years - it was not difficult for me to understand the idea and the code itself of your 2009 invention. Thank you, KolAsim!

Mehr lesen
Gepostet am von Tom G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... it is a pleasure to meet people who know how to evaluate, appreciate and understand on the fly ...
... I wanted to add that my code is 100% free (made in the cellar)tongue-out,
so you can delete all my comments from the code ...ciao...wink

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Tom G.
Tom G.
User
Autor

No, I will not... laughing

Mehr lesen
Gepostet am von Tom G.