Bounce transition of image show

I am trying to reproduce the bounce type of transition that occurs on the home page. I have created the slides without issue but could not find anything in the module settings. Please advise.

Hi

Here are settings for Image Show from demo page:

The module settings are exactly like that. Unchanged from the quickstart except for the slides. The transition fades, but does not 'bounce'. The site is www.mdkit.co.uk.

Hi

Looks like You are lacking some css code like

Code: Select all

.gkIsWrapper-gk_appsprotech .gkIsSlide {
transform: scale(0);
transition: transform 0.5s ease-out, margin-top 0.25s ease-out; }


please try update template and module to the latest versions, because this code is present in my copy.

Both template and module are /and were up to date. I have put that code into the overides section in template manager, but that also does not work, please tell me which css file i need to insert that code into. Thanks.

I have just inserted that code into the overide.css (removing it from template manager, but keeping overrides switched on), yet the problem persists.

I have just inserted that code into the overide.css (removing it from template manager, but keeping overrides switched on), yet the problem persists.

Hi, i can confirm the same!

I have just inserted that code into the overide.css (removing it from template manager, but keeping overrides switched on), yet the problem persists.

Hi, i can confirm the same!

And i am answering to my self...
just paste in the gk.stuff.css

Code: Select all

.gkIsWrapper-gk_appsprotech *::-moz-selection {
    background: none repeat scroll 0 0 transparent !important;
}
.gkIsWrapper-gk_appsprotech {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}
.gkIsWrapper-gk_appsprotech .gkIsImage {
    -moz-transition: opacity 1s ease-out 0s;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsImage {
    opacity: 1;
}
.gkIsWrapper-gk_appsprotech .gkIsPreloader {
    -moz-animation-direction: alternate;
    -moz-animation-duration: 0.35s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: preloader;
    background: none repeat scroll 0 0 #F67C40;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    text-indent: -9999px;
    top: 50%;
    width: 8px;
    z-index: 128;
}
.slide-links .gk_is_slide {
    cursor: pointer;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination {
    -moz-transition: bottom 0.3s ease-out 0s;
    bottom: -100px;
    height: 50px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 100;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsPagination {
    bottom: 0;

.gkIsWrapper-gk_appsprotech .gkIsPagination:before {
    background-position: center 0;
    left: 0;
    right: auto;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 13px 0 0;
    position: relative;
    z-index: 102;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li {
    float: left;
    height: 24px;
    margin-left: 10px;
    text-indent: -9999px;
    width: 24px;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:first-child {
    margin-left: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li a {
    -moz-transition: all 0.15s ease-out 0s;
    background: none repeat scroll 0 0 #F67C40;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 16px;
    margin: 4px;
    width: 16px;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li.active a, .gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:hover a {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 24px;
    margin: 0;
    width: 24px;
}

.gkIsWrapper-gk_appsprotech .gkIsNext {
    background-position: right 0;
    left: auto;
    right: 30%;
}
.gkIsWrapper-gk_appsprotech .gkIsPrev:hover, .gkIsWrapper-gk_appsprotech .gkIsNext:hover {
    -moz-transform: scale(0.85) !important;
    background-color: #353639;
    cursor: pointer;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsPrev {
    -moz-transform: scale(1);
    left: 0;
    opacity: 1;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsNext {
    -moz-transform: scale(1);
    opacity: 1;
    right: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsSlide {
    left: 50%;
    position: absolute;
    visibility: hidden;
}
.gkIsWrapper-gk_appsprotech .gkIsSlide:first-child {
    visibility: visible;
}
.gkIsWrapper-gk_appsprotech .gkIsText {
    display: block;
    left: 0;
    position: absolute;
    text-align: center;
    text-transform: none;
    width: 100%;
    z-index: 127;
}
.gkIsWrapper-gk_appsprotech .gkIsText h1 a {
    color: #FFFFFF;
    display: block;
    line-height: 46px;
    margin-top: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsText h2 a {
    color: #FFC9B1;
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 40px;
}
.gkIsWrapper-gk_appsprotech .gkIsText a {
    color: #FFFFFF;
}
.gkIsWrapper-gk_appsprotech .gkIsText, .gkIsWrapper-gk_appsprotech .gkIsSlide {
    -moz-transform: scale(0);
    -moz-transition: -moz-transform 0.5s ease-out 0s, margin-top 0.25s ease-out 0s;
}
.gkIsWrapper-gk_appsprotech .gkIsText.active, .gkIsWrapper-gk_appsprotech .gkIsSlide.active {
    -moz-transform: scale(1);
}
.gkIsWrapper-gk_appsprotech .gkIsText {
    margin-top: 60px;
}
.gkIsWrapper-gk_appsprotech .gkIsText.active {
    margin-top: 0;
}


I have just inserted that code into the overide.css (removing it from template manager, but keeping overrides switched on), yet the problem persists.

Hi, i can confirm the same!

And i am answering to my self...
just paste in the gk.stuff.css

Code: Select all

.gkIsWrapper-gk_appsprotech *::-moz-selection {
    background: none repeat scroll 0 0 transparent !important;
}
.gkIsWrapper-gk_appsprotech {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}
.gkIsWrapper-gk_appsprotech .gkIsImage {
    -moz-transition: opacity 1s ease-out 0s;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsImage {
    opacity: 1;
}
.gkIsWrapper-gk_appsprotech .gkIsPreloader {
    -moz-animation-direction: alternate;
    -moz-animation-duration: 0.35s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: preloader;
    background: none repeat scroll 0 0 #F67C40;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    text-indent: -9999px;
    top: 50%;
    width: 8px;
    z-index: 128;
}
.slide-links .gk_is_slide {
    cursor: pointer;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination {
    -moz-transition: bottom 0.3s ease-out 0s;
    bottom: -100px;
    height: 50px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 100;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsPagination {
    bottom: 0;

.gkIsWrapper-gk_appsprotech .gkIsPagination:before {
    background-position: center 0;
    left: 0;
    right: auto;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 13px 0 0;
    position: relative;
    z-index: 102;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li {
    float: left;
    height: 24px;
    margin-left: 10px;
    text-indent: -9999px;
    width: 24px;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:first-child {
    margin-left: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li a {
    -moz-transition: all 0.15s ease-out 0s;
    background: none repeat scroll 0 0 #F67C40;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 16px;
    margin: 4px;
    width: 16px;
}
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li.active a, .gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:hover a {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 24px;
    margin: 0;
    width: 24px;
}

.gkIsWrapper-gk_appsprotech .gkIsNext {
    background-position: right 0;
    left: auto;
    right: 30%;
}
.gkIsWrapper-gk_appsprotech .gkIsPrev:hover, .gkIsWrapper-gk_appsprotech .gkIsNext:hover {
    -moz-transform: scale(0.85) !important;
    background-color: #353639;
    cursor: pointer;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsPrev {
    -moz-transform: scale(1);
    left: 0;
    opacity: 1;
}
.gkIsWrapper-gk_appsprotech.loaded .gkIsNext {
    -moz-transform: scale(1);
    opacity: 1;
    right: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsSlide {
    left: 50%;
    position: absolute;
    visibility: hidden;
}
.gkIsWrapper-gk_appsprotech .gkIsSlide:first-child {
    visibility: visible;
}
.gkIsWrapper-gk_appsprotech .gkIsText {
    display: block;
    left: 0;
    position: absolute;
    text-align: center;
    text-transform: none;
    width: 100%;
    z-index: 127;
}
.gkIsWrapper-gk_appsprotech .gkIsText h1 a {
    color: #FFFFFF;
    display: block;
    line-height: 46px;
    margin-top: 0;
}
.gkIsWrapper-gk_appsprotech .gkIsText h2 a {
    color: #FFC9B1;
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 40px;
}
.gkIsWrapper-gk_appsprotech .gkIsText a {
    color: #FFFFFF;
}
.gkIsWrapper-gk_appsprotech .gkIsText, .gkIsWrapper-gk_appsprotech .gkIsSlide {
    -moz-transform: scale(0);
    -moz-transition: -moz-transform 0.5s ease-out 0s, margin-top 0.25s ease-out 0s;
}
.gkIsWrapper-gk_appsprotech .gkIsText.active, .gkIsWrapper-gk_appsprotech .gkIsSlide.active {
    -moz-transform: scale(1);
}
.gkIsWrapper-gk_appsprotech .gkIsText {
    margin-top: 60px;
}
.gkIsWrapper-gk_appsprotech .gkIsText.active {
    margin-top: 0;
}


Nowhere in your code do i see the code i have been informed is missing in mine. (shrugs) - Or do you state where i should have put it. I have put it into the gk.stuff.css, in a few locations, issue remains.

Hi

This code doesn't look properly. Please check and replace the full code for this module in gk_stuff.css:

Code: Select all

/* Image Show GK4 */
.gkIsWrapper-gk_appsprotech ::selection { background: transparent!important; }
.gkIsWrapper-gk_appsprotech { position:relative; width:100%; margin-bottom: 40px; }
.gkIsWrapper-gk_appsprotech .gkIsImage { position: relative; width: 100%; opacity: 0; transition: opacity 1.0s ease-out; overflow: hidden; }
.gkIsWrapper-gk_appsprotech.loaded .gkIsImage { opacity: 1; }
.gkIsWrapper-gk_appsprotech .gkIsPreloader { position:absolute; z-index:128; top:50%; left:50%; width:8px; height:8px; border-radius: 50%; text-indent: -9999px; display: block; background: #f67c40; margin: -4px 0 0 -4px; animation-name: preloader; animation-iteration-count: infinite; animation-duration: 0.35s; animation-direction: alternate; }
@keyframes preloader { from { width: 8px; height: 8px; background: #f67c40; margin: -4px 0 0 -4px; } to { width: 12px; height: 12px; background: #fff; margin: -6px 0 0 -6px; } }
.slide-links .gk_is_slide { cursor:pointer; }
.gkIsWrapper-gk_appsprotech .gkIsPagination { width:100%; height:50px; text-align: center; position: absolute; bottom: -100px; transition: bottom 0.3s ease-out; z-index: 100; }
.gkIsWrapper-gk_appsprotech.loaded .gkIsPagination { bottom: 0px; }
.gkIsWrapper-gk_appsprotech .gkIsPagination:before,
.gkIsWrapper-gk_appsprotech .gkIsPagination:after { background: transparent url('../images/style1/pagination_lines.png') no-repeat center bottom; content: ""; height:50px; width:40%; right:0; position: absolute; z-index: 101; }
.gkIsWrapper-gk_appsprotech .gkIsPagination:before{ background-position: center 0; left:0; right:auto; }
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol { display:inline-block; position: relative; z-index: 102; list-style-type:none; padding:13px 0 0 0; margin: 0; }
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li { float:left; width:24px; height:24px; margin-left:10px; text-indent: -9999px; }
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:first-child { margin-left:0; }
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li a { display: block; margin:4px; width:16px; height:16px; background: #f67c40; border-radius: 50%; transition: all 0.15s ease-out; }
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li.active a,
.gkIsWrapper-gk_appsprotech .gkIsPagination > ol li:hover a { width:24px; height:24px; background:#fff; margin:0; }
.gkIsWrapper-gk_appsprotech .gkIsPrev,
.gkIsWrapper-gk_appsprotech .gkIsNext { width: 70px; height: 70px; border: 4px solid #fff; background: transparent url('../images/style1/is_arrows.png') no-repeat 0 0; position: absolute; top: 50%; left: 30%; margin-top: -35px; text-indent: -9999px; border-radius: 50%; cursor: pointer; transform: scale(0); opacity: 0; transition: background-color 0.3s ease-out, transform 0.3s ease-out, left 0.3s linear, right 0.3s linear, opacity 0.3s linear; z-index: 127; }
.gkIsWrapper-gk_appsprotech .gkIsNext { right: 30%; left: auto; background-position: right 0; }
.gkIsWrapper-gk_appsprotech .gkIsPrev:hover,
.gkIsWrapper-gk_appsprotech .gkIsNext:hover { background-color: #353639; cursor: pointer; transform: scale(0.85)!important; }
.gkIsWrapper-gk_appsprotech.loaded .gkIsPrev { left: 0; opacity: 1; transform: scale(1.0); }
.gkIsWrapper-gk_appsprotech.loaded .gkIsNext { right: 0; opacity: 1; transform: scale(1.0); }
.gkIsWrapper-gk_appsprotech .gkIsSlide { position:absolute; left:50%;  visibility:hidden; }
.gkIsWrapper-gk_appsprotech .gkIsSlide:first-child { visibility:visible; }
.gkIsWrapper-gk_appsprotech .gkIsText { display: block; position: absolute; left: 0; z-index: 127; text-align: center; text-transform: none; width: 100%; }
.gkIsWrapper-gk_appsprotech .gkIsText h1 a { display: block; color: #fff; line-height: 46px; margin-top: 0;  }   
.gkIsWrapper-gk_appsprotech .gkIsText h2 a { display: block; color: #ffc9b1; font-size: 20px; font-weight: 400; line-height: 40px; margin-bottom: 40px; }
.gkIsWrapper-gk_appsprotech .gkIsText a { color: #fff; }
.gkIsWrapper-gk_appsprotech .gkIsText,
.gkIsWrapper-gk_appsprotech .gkIsSlide { transform: scale(0); transition: transform 0.5s ease-out, margin-top 0.25s ease-out; }
.gkIsWrapper-gk_appsprotech .gkIsText.active,
.gkIsWrapper-gk_appsprotech .gkIsSlide.active { transform: scale(1.0); }
.gkIsWrapper-gk_appsprotech .gkIsText { margin-top: 60px; }
.gkIsWrapper-gk_appsprotech .gkIsText.active { margin-top: 0; }


I have inserted that into the css and the problem still remains. Please have a look at the uploaded file, this is starting to get rather silly now.

Shouldn't that code be present in the quickstart anyway?

I have not made any customizations to the css yet, so perhaps you could just upload the proper working file (from your installation) and we see what that does.

Ok, extension css not allowed to be uploaded (very helpfull) - I have zipped it.

gk.stuff.zip

Hi

Please send me ftp access. I'll make it myself.

I have pm'd you the details.

Hi

Sorry but I did not recived it. Please try use a contact form on my site. I have too maby problems with my mail accout and forum PM system.

I have send you the info via your website. Thanks.

Hi

I got the mail but this access is not working

Username and password do not match or you do not have an account yet.

I had tested those in filezilla before sending, they were correct. However, not to worry. I am going to buid it from scratch without using the quickstart on my home server, see what happens. If the issue still returns I will let you know. Thanks for your time, much appreciated.

Hi

"In filezilla"?? So was it an FTP access ? I needed joomla panel access, so that was a problem probably Ok. Will wait till You finish.

That's ok, yes it was ftp access ( i didnt realise you meant the ftp via joomla; i rarely set that up). But not to worry. Thanks again for you time.

Hi

Ok. Please do not forget to send me joomla panel access than