Joomla Templates Club 406,261 posts

[sloger Friend slogerJoin date: November 2010Posts: 15Downloads:0Uploads:0]

#157229

The question is about the main JA Slideshow – the one on top of the page.
There are 3 images there – One in the center, and 2 on the sides (with arrows to change pictures).

I need to apply opacity to the side images – The central image has to be as is, but the ones on the left and right of it has to be slightly transparent.

The problem is that the style for these images are generated dynamically in: modules/mod_jaslideshow2/tmpl/default.php

and all the divs in this module get the same style – <div class=”ja-slide-item”>

Therefore, I can not apply opacity only to the side slides. When I apply style – it applies to all the slides (the central as well).

How could I apply opacity only to the side images of this module?

Thanks!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#365849

GREAT QUESTION – I look forward to someone providing an answer as well.

As I haven’t yet explored this template, can you tell me if the slideshow settings allow for automatic advancing?

[sloger Friend slogerJoin date: November 2010Posts: 15Downloads:0Uploads:0]

#365863

If by automatic advancing, you mean Auto play, then yes, slideshow settings allow that for both Slidshow modules… But please, do not lead this thread away from the main subject… I need to know how to apply opacity on the side pictures!!
Let us talk after… I will answer you everything I know about the template.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#365883

Found these resources that might help . . . .

http://css.flepstudio.org/en/css3/opacity-transparency.html

http://www.w3schools.com/Css/css_image_transparency.asp

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#365908

Dear sloger!

Regarding your main issue: apply opacity for next and pre image, the stylesheet for them is placed in mod_jaslideshow2.css please try the following:

– Open: templates/ja_quartz/css/mod_jaslideshow2.css find this line:

.but_prev, .but_next {
background: #000000;
position: absolute;
top: 0;
z-index: 99;
}- Add this code: opacity: 0.x !important; (you could change x) to become a parameter of these class.

Example:

.but_prev, .but_next {
background: #000000;
position: absolute;
top: 0;
z-index: 99;
opacity: 0.3 !important;
}Hope this helps you. :-*.

[sloger Friend slogerJoin date: November 2010Posts: 15Downloads:0Uploads:0]

#366025

I tried that already – It does not solve the case…
It applies opacity to the button backrounds, but not to the image!

The trick with this, as I explained above, is that style classes for the slides (class=”ja-slide-item”) are generated by this code:

<?php for ($i=0;$i<count($images); $i++) {?>
<div class="ja-slide-item"><img src="<?php echo $folder.$images[$i];?>" alt="<?php echo str_replace('"', '"/', strip_tags($captionsArray[$i]) );?>"/>
<?php if ($showdescwhen == 'always' && $captionsArray[$i]):?><div class="ja-slide-desc"><?php echo $captionsArray[$i];?></div><?php endif; ?>
</div>
<?php }?>

so, if there are 4 images in the folder, you will have 4 <div class=”ja-slide-item”> , but all with the same style: “ja-slide-item”
if I could differentiate them somehow – make it: ja-slide-item1, ja-slide-item2, ja-slide-item3, etc., then I could apply opacity only to selected slides (left and right) and leave the central slide as is…

But I don’t know if this is possible?

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#366456

Hi sloger!

We could add class to them by change this code (line 5) in modules/mod_jaslideshow2/tmpl/default.php:

<div class=”ja-slide-item”><img src=”<?php echo $folder.$images[$i];?>” alt=”<?php echo str_replace(‘”‘, ‘”/’, strip_tags($captionsArray[$i]) );?>”/>

to

<div class=”ja-slide-item ja-slide-item-<?php echo $i; ?>”><img src=”<?php echo $folder.$images[$i];?>” alt=”<?php echo str_replace(‘”‘, ‘”/’, strip_tags($captionsArray[$i]) );?>”/>

You should have ja-slide-item-1, ja-slide-item-2, ja-slide-item-3, ja-slide-item-0.

Hope this helps you.

[sloger Friend slogerJoin date: November 2010Posts: 15Downloads:0Uploads:0]

#366762

Guys, you are the best! Thanks a lot..!!

[Author]

Posts