Joomla Templates Club 406,261 posts

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#152224

Hi all

Does anyone know if it is possible to have text and image in the slideshow, on the homepage.

Here is the Joomlart demo page, http://www.joomlart.com/demo/#templates.joomlart.com/ja_ores

And I have attached my graphic to explain what I am trying to do.

Thankss all

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#348938

Dear munders ! here is the heavy customization for ores template

Pls try to see the demo as ja norite or ja kyanite ii, pls try to look ja slideshow 2 in detail, based those demo, you can make css, configurations, and change override layout of the module same as demos, ( you can get css from one of demos to use for your module )

GOod luck

[aidosnet Friend aidosnetJoin date: December 2009Posts: 31Downloads:0Uploads:4 Thanks: 4]

#349244

I’ve the same problem:
I want to bring the slideshow appearance and behaviour from ja_rasite (very nice slideshow with images) to ja_ores
I already spent a lot of time looking for css and php files…
can you please help me?

thanks

[actionplus Friend actionplusJoin date: October 2009Posts: 13Downloads:4Uploads:5 Thanks: 3]

#349332

Hi all
which files should i check

[aidosnet Friend aidosnetJoin date: December 2009Posts: 31Downloads:0Uploads:4 Thanks: 4]

#349333

I attach a screenshot of what I get when I use in ja.ores the 4 articles from the demo/slideshow category from ja.rasite
can you tell how can I get a slideshow with image and text?
thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#349382

Hello aidosnet!

Here the solution for you:
1) you replace all source inside the templata/ja_ores/html/mod_jaslideshow2/default_article.php file by :
[PHP]
<div class=”ja-slidewrap<?php echo $params->get(‘moduleclass_sfx’);?> ja-<?php echo $source;?>” id=”ja-slide-articles-<?php echo $module->id;?>” style=”visibility:hidden”>

<div class=”ja-slide-main-wrap<?php echo ($navAlignment == ‘vertical_left’ ? ‘ ja-slide-right’ : ” )?>”>

<div class=”ja-slide-mask”>

</div>

<div class=”ja-slide-main”>

<?php foreach( $list as $k=> $item ) :

// parse image in the article’s content.

$helper->parseImages( $item, $params );

$list[$k] = $item;

?>

<div class=”ja-slide-item”>

<?php // echo $helper->renderImage ($item->title, $item->mainImage, $params, $mainWidth, $mainHeight );?>

<?php if ( $showdescwhen == ‘always’ ):?>

<div class=”ja-slide-desc”>

<a <?php echo $target; ?> href=”<?php echo $item->link; ?>”>

<span><?php echo $helper->trimString( $item->title, $titleMaxChars );?></span>

</a>

<div><?php echo $helper->trimString( ($item->introtext), $descMaxChars ); ?></div>

<?php if ($showDescription==’desc-readmore’): ?>

<a <?php echo $target; ?> class=”readon readmore” href=”<?php echo $item->link; ?>”>

<?php echo $readmoretext;?>

</a><?php endif; ?>

</div>

<?php endif; ?>

</div>

<?php endforeach; ?>

</div>

<?php if ( $animation==’move’ && $container ) :?>

<div class=”but_prev ja-slide-prev”></div>

<div class=”but_next ja-slide-next”></div>

<?php endif; ?>

<!– JA SLIDESHOW 3 MARK –>

<div class=”maskDesc”>

<div class=”inner”>

</div>

</div>

</div>

<!– END JA SLIDESHOW 3 MARK –>

<?php if( $showDescription && $showdescwhen != ‘always’ ) : ?>

<div class=”ja-slide-descs”>

<?php foreach( $list as $item ) : ?>

<div class=”ja-slide-desc”>

<a <?php echo $target; ?> href=”<?php echo $item->link; ?>”>

<span><?php echo $helper->trimString( $item->title, $titleMaxChars );?></span>

</a>

<div><?php echo $helper->trimString( ($item->introtext), $descMaxChars ); ?></div>

<?php if ($showDescription==’desc-readmore’): ?>

<a <?php echo $target; ?> class=”readon readmore” href=”<?php echo $item->link; ?>”>

<?php echo $readmoretext;?>

</a><?php endif; ?>

</div>

<?php endforeach; ?>

</div>

<?php endif; ?>

<!– JA SLIDESHOW 3 NAVIAGATION –>

<?php if ( $navigation ): ?>

<div class=”ja-slide-thumbs-wrap<?php echo $classNav;?>”>

<div class=”ja-slide-thumbs”>

<?php foreach( $list as $key => $item ) : ?>

<div class=”ja-slide-thumb”>

<?php if ($navigation==’thumbs’){?>

<div class=”ja-slide-thumb-inner”>

<?php if( $navShowthumb ) : ?>

<?php echo $helper->renderImage ( $item->title, $item->thumbnail, $params,

$thumbWidth, $thumbHeight, ‘align=”left”‘ ); ?>

<?php endif; ?>

<h3><?php echo $helper->trimString( $item->title, $titleMaxChars );?></h3>

<?php if( $navShowDate ) : ?>

<span class=”ja-createdate clearfix”>

<?php echo JTEXT::_(“POSTED DATE”). ”  “. JHTML::_(‘date’, $item->date, JText::_(‘DATE_FORMAT_LC4’)); ?>

</span>

<?php endif; ?>

<?php if( $navShowdesc ): ?>

<?php endif; ?>

</div>

<?php }else{?><span><?php echo ($key+1);?></span><?php } ?>

</div>

<?php endforeach; ?>

</div>

<div class=”ja-slide-thumbs-mask” style=” display:none “>

<div class=”ja-slide-thumbs-mask-left”> </div>

<div class=”ja-slide-thumbs-mask-center”> </div>

<div class=”ja-slide-thumbs-mask-right”> </div>

</div>

<p class=”ja-slide-thumbs-handles”>

<?php foreach( $list as $item ) : ?>

<span> </span>

<?php endforeach; ?>

</p>

<!– JA SLIDESHOW 3 NAVIAGATION –>

</div>

<?php endif; ?>

<!– JA SLIDESHOW 3 BUTTONS CONTROL –>

<?php if ($control): ?>

<div class=”ja-slide-buttons clearfix”>

<span class=”ja-slide-prev”>« <?php echo JText::_(‘PREVIOUS’);?></span>

<span class=”ja-slide-playback”>‹ <?php echo JText::_(‘PLAYBACK’);?></span>

<span class=”ja-slide-stop”><?php echo JText::_(‘STOP’);?></span>

<span class=”ja-slide-play”><?php echo JText::_(‘PLAY’);?> ›</span>

<span class=”ja-slide-next”><?php echo JText::_(‘NEXT’);?> »</span>

</div>

<?php endif; ?>

</div>
[/PHP]
2) you open the file: templates/ja_ores/css/mod_jaslideshow2.css and the fillowing code:

.maskDesc .ja-slide-desc {
padding: 120px 0 20px 0;
color: #101010;
font-size: 100%;
}

replace:

.maskDesc .ja-slide-desc {
padding: 34px 0 20px 0;
color: #101010;
font-size: 100%;
}

2) find:

#ja-slideshow h3 {
color: #101010 !important;
background-image: none !important;
position: absolute;
left: 0;
top: 100px;
}

replace:

#ja-slideshow h3 {
color: #101010 !important;
background-image: none !important;
position: absolute;
left: 0;
top: 10px;
}

Good luck

[wombat1 Friend wombat1Join date: March 2010Posts: 117Downloads:0Uploads:1 Thanks: 38 Thanked: 11 times in 1 posts]

#360296

Ive looked through many forum posts regarding image issue in slideshow for ores, but all answers including the code supplied here seem to remove the image from the slideshow.

I just want the image to stretch the proper width of 700 pixels in the slideshow, everything elses is fine and can be adjusted, by using css tools like firebug i found
.ja-slide-item img
but using the correct width of 700 px here or in any other item in css does not change the width.
The original image is made at 700 px so that it should fit.

If there is not a way to do this can anyone that has been able to ¨transplant ¨ a slidshow2 from any other template please explain as none of the methods ive seen here seem to work, or perhaps im just a lil slow.

[wombat1 Friend wombat1Join date: March 2010Posts: 117Downloads:0Uploads:1 Thanks: 38 Thanked: 11 times in 1 posts]

#360301

OK, ive managed to get images working at the right width, the only thing is that the image is currently in front of the layer with the inner shadow. What element in css do i adjust the z-index for in order to place the image behind the inner shadow. Also does it have true transparency, otherwise this wont work of course.
Thanks for any help and apologies for the confusion in quoted message

<em>@wombat1 200171 wrote:</em><blockquote>Ive looked through many forum posts regarding image issue in slideshow for ores, but all answers including the code supplied here seem to remove the image from the slideshow.

I just want the image to stretch the proper width of 700 pixels in the slideshow, everything elses is fine and can be adjusted, by using css tools like firebug i found
.ja-slide-item img
but using the correct width of 700 px here or in any other item in css does not change the width.
The original image is made at 700 px so that it should fit.

If there is not a way to do this can anyone that has been able to ¨transplant ¨ a slidshow2 from any other template please explain as none of the methods ive seen here seem to work, or perhaps im just a lil slow.</blockquote>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#360437

<em>@wombat1 200179 wrote:</em><blockquote>OK, ive managed to get images working at the right width, the only thing is that the image is currently in front of the layer with the inner shadow. What element in css do i adjust the z-index for in order to place the image behind the inner shadow. Also does it have true transparency, otherwise this wont work of course.
Thanks for any help and apologies for the confusion in quoted message</blockquote>
you try to use fire bug of fireofox: http://getfirebug.com/, http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/ to find css of them.

or you try to give me the link to your site i ‘ll check and give you the solution 🙂

[piquetdj Friend piquetdjJoin date: September 2010Posts: 4Downloads:0Uploads:0]

#361546

I tried this code to see if it would resolve my issue (http://www.joomlart.com/forums/topic/image-related-error-with-slideshow2/) and ended up with this slightly different issue. We would rather not have the images show up on the slideshow at all, so is there an easy way to resolve this?

Thanks

[Author]

Posts