Main slideshow Next Prev Button

Hi
We would like stop thumbnails on main slideshow, ok there is option backend thumbnails no, but for rest of slideshow we want to put next prev button on slideshow for easy navigations,

please help for this,
property.luxos.com

Looking forward for your prompt reply.

Thanks
similar like this

Hi,

It would need some customization, If you can PM me your FTP access then I can try for you.

Hello,

I got your PM with only backend access while what I really need is FTP access, can you please suffice?

Hi Boss

Please check i sent all details,

Thanks

Hi,

It's done for you.

Change logs:
/modules/mod_image_show_gk4/styles/gk_eSport/engine.js
- Removed:

Code: Select all

if(wrapper.getElement('.gkIsThumbnails')) {
         wrapper.getElements('.gkIsThumbnailsWrap li').each(function(item, i) {
            item.addEvent('click', function() {
               if($G['actual_slide'] != i && $G['animState'] == 0) {
                  $G['blank'] = true;
                  gk_is_eSport(wrapper, contents, slides, textBlocks, i, squares, squareSizes, animOrder, imagesToLoad, $G);
               }
            });
         });
         wrapper.getElement('.gkIsThumbnailsWrap li').setProperty('class', 'active');
      }


Code: Select all

if(wrapper.getElement('.gkIsThumbnails')) {
            wrapper.getElements('.gkIsThumbnailsWrap li').setProperty('class', '');
            wrapper.getElements('.gkIsThumbnailsWrap li')[$G['actual_slide']].setProperty('class', 'active');
            $G['scroll'].toElement(wrapper.getElements('.gkIsThumbnailsWrap li')[which]);
         }


/modules/mod_image_show_gk4/styles/gk_eSport/view.php

- Added:

Code: Select all

<div class="gkIsThumbnails">
            <a class="gkIsPrev"><span>&laquo;</span></a>
            <div class="gkIsThumbnailsWrap"></div>
            <a class="gkIsNext"><span>&raquo;</span></a>
         </div>


Before:

Code: Select all

<?php if($this->config['config']->gk_eSport->gk_eSport_thumbnails == 1) : ?>


Overrode CSS:

Code: Select all

.gkIsPrev, .gkIsNext{
   position: absolute !important;
   bottom: 370px;
   z-index: 99999999;
}
.gkIsPrev{
   left: 0;
}
.gkIsNext{
   right: 0;
}


Thanks Alot, you are the best mate,
But problem is there are some white dots just next to next and prev button, also titles are not showing

Thanks once again

Regards

Now you have to change style for it yourself, in file modules/mod_image_show_gk4/styles/gk_eSport/style.css
Find this code to change background and style of those buttons:

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span,
.gkIsWrapper-gk_eSport .gkIsNext > span { height: 34px; width: 17px; background: transparent url('images/is_nav.png') no-repeat left -1px; text-indent: -999em; display: block; border-left: 20px solid #fff; position: absolute; top: 50%; margin-top: -17px; }
.gkIsWrapper-gk_eSport .gkIsNext > span { background-position: right -1px; border-right: 20px solid #fff; border-left: none; right: 0; }


I will think of solution to show titles later.

Hi
I tried hard, but with next and prev button there is block coming, which is not going away, also need to place these button's at the edge but no way to go,

Check Screen Short

Regards

Thanks

Use this css code to get rid of the borders:

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span, .gkIsWrapper-gk_eSport .gkIsNext > span{
border: 0 !important;
}


Thanks Alot its Works, Now just need to have title, also actually we have go live soon, please help for this also

Thanks alot,

regards

I added some css code to override and it shows titles now. Please check and confirm the same.

Hi

Sorry to Disturb you again, we revert our website, so need to do all things again,
I am trying to bring arrows button on slideshow but i am not able to have while i am using code and everything right as given below, even files are there.

Can you help me to bring next prev button

Thanks


Code:

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span {height: 60px; width: 60px; background:url('images/preva.png') no-repeat;  position: absolute; top: 50%; margin-top: -17px; margin-left:-30px;border: 0 !important;}
.gkIsWrapper-gk_eSport .gkIsNext > span {height: 60px; width: 60px; background:url('images/nexta.png') no-repeat ;   position: absolute; top: 50%; margin-top: -17px;margin-right:-30px; border: 0 !important;}

Do you mean that you want me to do it again for you? Ohh sorry please do it yourself by following the changelogs I have provided before, I can't do it more than once. Thanks for understanding.

Hi Boss

Sorry you misunderstood, i made all changes ......I did it as you done, just problem is Arrows are not showing....again because i am following all your steps and code is also right which i postes before,

So just kind request what could be wrong

Thanks in advance

Regards

But actually I see Arrow buttons are displaying. Can you please clarify?

Hi Don

Thanks, Yes Images which i gave in code are other as you can see in above code nexta, preva..... also this block which is not going away....even i did important for block ...... just have a look above code......

Do you mean the white borders? If so, check this again https://www.gavick.com/support/forums/1 ... 545#p62101

I followed already this approach thats why i am showing you code because code is exactly same as you said, even for next and previous buttons but still no effects are coming this is a problem and reason to disturbed your bro, i know might be you are hating but.......

Thanks

No please don't misunderstand, I don't hate helping you out, what I wanted is that to help you understand how to work with html/css. Now please take a screenshot to show me again what you want to achieve then I will check, sorry I'm quite busy now

Cheers,

Hi Don lee

I am sorry for bothering you again, i now you guys are much busy .....Still with kind request to get rid of this problem please find screen short for actual problem

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span {height: 60px; width: 60px; background:url('images/preva.png') no-repeat;  position: absolute; top: 50%; margin-top: -17px; margin-left:-30px;border: 0 !important;}
.gkIsWrapper-gk_eSport .gkIsNext > span {height: 60px; width: 60px; background:url('images/nexta.png') no-repeat ;   position: absolute; top: 50%; margin-top: -17px;margin-right:-30px; border: 0 !important;}

The code above is right to show buttons i really cant understand why its not showing....

Please just need help regarding this issue.


regards

Hi,

Try adding this code:

Code: Select all

.gkIsWrapper-gk_eSport .gkIsNext > span, .gkIsWrapper-gk_eSport .gkIsPrev > span{
border: none!important;
}


Hi Don Lee

I did all procedure once again as you done before, even i tried with this still no changes coming in please can you help me, f you need ftp details i am ready to send you PM

regards

Ok please give me FTP access again. I tried with Firebug and it did work for me, you also should try to learn to use Firebug because it's very helpful to deal with css issues.

Hi Don Lee
I sent you all details, have a look, I dont since since two days, i am looking for this bug .....no reach

Thanks

I got it and added the code into file override.css and the borders are gone now, please check and confirm the same.

Cheers,

Dear Don lee

Thanks alot, I really dont know what the problem is, even i am trying to change prev, next button in CSS file, i gave right path of images, but no effect, and same i am trying to change Title text color, and title background, still nothing happening, even i am givìng right values back in CSS file.

Can you lead me what could be mistake...

Even all permissions are correctly set.


Best regards

Hi,

Sorry I don't get you. Just tell me what you are trying to do now, better use screenshots to show, and tell me what was your code, where you input it, how it worked...then I can advise you better.

Thanks,

Good Day Don Lee

Thanks for helping out with all issues, you guys are great..

Ok I want to change Next Prev Button on main slideshow,

I am using following code to replace buttons in file path given below.

/httpdocs/modules/mod_image_show_gk4/styles/gk_eSport

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span {height: 60px; width: 60px; background:url('images/preva.png') no-repeat;  position: absolute; top: 50%; margin-top: -17px; margin-left:-30px;border: 0 !important;       }
.gkIsWrapper-gk_eSport .gkIsNext > span {height: 60px; width: 60px; background:url('images/nexta.png') no-repeat ;   position: absolute; top: 50%; margin-top: -17px;margin-right:-30px; border: 0 !important;    }

But its now effecting,

regards

Hi,

Please make sure that you have given correct paths to your new images. If you put the code to \modules\mod_image_show_gk4\styles\gk_eSport\style.css then the path must be "/images/preva.png" but "images/preva.png".

Better try with absolute paths first to check if your code gets affected.

Cheers,

Thanks,

Hi Boss

Thanks alot for your helping, Still no effects, i dont know why is that even i apply "!important" keyword but still not response

regards

I know the cause now, you have changed the code in /modules/mod_image_show_gk4/styles/gk_eSport/style.css but this file is not loaded, check source of the site to see. Every customization please add to /templates/gk_eSport/css/override.css then you won't need to worry for any losses due to upgrades.

Regarding the background, you can find the code in /templates/gk_eSport/css/style1.css line 256 to change:

Code: Select all

.gkIsWrapper-gk_eSport .gkIsPrev > span,
.gkIsWrapper-gk_eSport .gkIsNext > span {
   background-image: url('../images/style1/is_nav.png');
}


Again, remember to add your changes to override.css

Cheers,