Public Forums 71,145 posts

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#169758

Hi,

I try to repeat the image of the slide show to run 100% screen width. Thought I could easy do this by editing the slideshow CSS, but can’t believe I’m having such problems to obtain this. Using Template JA Droid.

Any assistance would be greatly appreciated.

Thank you very much

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419818

Hi jacostander

<blockquote>I try to repeat the image of the slide show to run 100% screen width</blockquote>

Could you be more clear ?

The Ja Slideshow for Ja Droid template has it’s own style defined in css styles files

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419820

I want the image to repeat. The image (slides) should run from left of the screen to right of the screen with no margin left or right.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419823

Hi

Seems to be a css customization

Could i have via Private Message your admin backend account ?

So i can see better of what we are talking ?

Thanks

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419829

Please see attachement of what I’m trying to do…

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419950

Hi

Thanks for your PM

I have checked in your /templates/ja_droid/css/mod_jaslideshow2.css now you have these settings around line 15

#ja-slideshow {
background: none repeat scroll 0 0 #18223B;
border-top: 1px solid #000000;
height: 310px;
width: 2000px; i have changed to 980px;
}

Then go to your Mod_Jaslideshow2 and change Animation Type from Fading to Moving and Animation Transition to Linear

Try these and let me know if this can solve your issue

Thanks

1 user says Thank You to pavit for this useful post

1. jacostander

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419961

Hi,

Thank you for the information. I like the scrolling effect now but still need to have the image to be from the left of the screen all the way to the right please. Please see attached.

My slides are 1200px wide, I can change this to be say 2000px so it stretch from side to side (screen width)

Thank you for the assistance so far.

---

Attachments:

1. 
2. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419963

Hi

Could you replace your Template.css with the original one ? so i can check all and suggest you what changes should be made.

let me know when you have done

Thanks

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419967

<em>@pavit 276688 wrote:</em><blockquote>Hi

Could you replace your Template.css with the original one ? so i can check all and suggest you what changes should be made.

let me know when you have done

Thanks</blockquote>

Ok, I have replaced it with the original. Thanks.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419973

Hi

If you have modified this file in this folder too /modules/mod_jaslideshow2/assets/themes/default/style.css

please replace it with the original one.

Thanks

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419974

<em>@pavit 276698 wrote:</em><blockquote>Hi

If you have modified this file in this folder too /modules/mod_jaslideshow2/assets/themes/default/style.css

please replace it with the original one.

Thanks</blockquote>

Did not make any modifications on this.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#419976

Hi

i’m sorry but I’m noticing that your file in /templates/ja_droid/css/mod_jaslideshow2.css is different from the original look here

This is your file

#ja-slideshow {
background: none repeat scroll 0 0 #18223B;
border-top: 1px solid #000000;
height: 250px;
width: 2000px;
}
#ja-slideshow .ja-slide-mask, #ja-slideshow .ja-slide-mask2 {
background: url("../images/sl-mask-left.png") repeat scroll 0 0 transparent;
height: 310px;
left: -300px;
width: 2000px;
}
#ja-slideshow .ja-slide-mask2 {
background: url("../images/sl-mask-right.png") repeat scroll 0 0 transparent;
}
.ja-slide-main-wrap {
height: 310px;
}
.ja-slide-item {
left: 0;
top: 0;
}
#ja-slideshow .main {
width: 100% !important;
}
.ja-slide-main-wrap {
width: 100% !important;
}

This is the original one in the quickstart package

#ja-slideshow {
background: #000;
border-top: 1px solid #000;
position: relative;
z-index: 10;
overflow: hidden;
}
.ja-slidewrap { border: 0; }
#ja-slideshow .ja-slide-mask,
#ja-slideshow .ja-slide-mask2 {
background: url(../images/sl-mask-left.png) no-repeat left top;
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
#ja-slideshow .ja-slide-mask2 {
background: url(../images/sl-mask-right.png) no-repeat right bottom;
position: absolute;
z-index: 101;
}
.ja-slide-main-wrap {
margin: 0 auto;
}
.ja-slide-item {
position: absolute;
}
#ja-slideshow .main { width: 100% !important;}
.ja-slide-main-wrap { width: 100% !important;}

Could you please copy this file from the quickstart package and overwrite your file with it ?

Thanks

[jacostander Friend jacostanderJoin date: August 2011Posts: 15Downloads:0Uploads:5 Thanks: 5]

#419999

<em>@pavit 276702 wrote:</em><blockquote>Hi

i’m sorry but I’m noticing that your file in /templates/ja_droid/css/mod_jaslideshow2.css is different from the original look here

This is your file

#ja-slideshow {
background: none repeat scroll 0 0 #18223B;
border-top: 1px solid #000000;
height: 250px;
width: 2000px;
}
#ja-slideshow .ja-slide-mask, #ja-slideshow .ja-slide-mask2 {
background: url("../images/sl-mask-left.png") repeat scroll 0 0 transparent;
height: 310px;
left: -300px;
width: 2000px;
}
#ja-slideshow .ja-slide-mask2 {
background: url("../images/sl-mask-right.png") repeat scroll 0 0 transparent;
}
.ja-slide-main-wrap {
height: 310px;
}
.ja-slide-item {
left: 0;
top: 0;
}
#ja-slideshow .main {
width: 100% !important;
}
.ja-slide-main-wrap {
width: 100% !important;
}

This is the original one in the quickstart package

#ja-slideshow {
background: #000;
border-top: 1px solid #000;
position: relative;
z-index: 10;
overflow: hidden;
}
.ja-slidewrap { border: 0; }
#ja-slideshow .ja-slide-mask,
#ja-slideshow .ja-slide-mask2 {
background: url(../images/sl-mask-left.png) no-repeat left top;
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
#ja-slideshow .ja-slide-mask2 {
background: url(../images/sl-mask-right.png) no-repeat right bottom;
position: absolute;
z-index: 101;
}
.ja-slide-main-wrap {
margin: 0 auto;
}
.ja-slide-item {
position: absolute;
}
#ja-slideshow .main { width: 100% !important;}
.ja-slide-main-wrap { width: 100% !important;}

Could you please copy this file from the quickstart package and overwrite your file with it ?

Thanks</blockquote>

Hi,

Everything should now be back to standard. The only thing I did change mas the Mask image of the slide show to be 100% transparant.

Thanks

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#420021

Hi jacostander

I have modified your module as shown in our demo server you must use that width and height for the images

also for the slides of the images from left to right try to look here

You can choose wich transition you want apply to your slideshow

[Author]

Posts