Joomla Templates Club 406,261 posts

[dslater04 Friend dslater04Join date: June 2010Posts: 7Downloads:0Uploads:0 Thanks: 3]

#153813

Hi all,

I have maybe a strange question.

I was hoping someone could tell me how I might change the JA Slideshow so that the item changes if you HOVER over it… at the moment you click an item on the slideshow to change it… is it possible for it to change if we just hover over the item ?

In addition, I’d like it if when i CLICK 1 of the items that it will act as “Read more” and goto the page it is linked too..

I hope this is possible. it would make this module awesome 😀

Thanks,

David

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#353714

<em>@dslater04 191614 wrote:</em><blockquote>Hi all,

I have maybe a strange question.

I was hoping someone could tell me how I might change the JA Slideshow so that the item changes if you HOVER over it… at the moment you click an item on the slideshow to change it… is it possible for it to change if we just hover over the item ?

In addition, I’d like it if when i CLICK 1 of the items that it will act as “Read more” and goto the page it is linked too..

I hope this is possible. it would make this module awesome 😀

Thanks,

David</blockquote>

For 1st wish:
– Open file modules/mod_jaslideshow2/assets/script.js
– Find this code at line 35:

handle_event: 'click',
– Replace by:

handle_event: 'mouseenter',
For the 2nd: I can not hack so far 🙁

1 user says Thank You to Don Lee for this useful post

1. dslater04

[dslater04 Friend dslater04Join date: June 2010Posts: 7Downloads:0Uploads:0 Thanks: 3]

#353724

Hiya,

Is it something you will look at? or maybe not for a while. I just wanted to know because I don’t want to spend time on ideas to work with the mouseover/click option if i won’t be able to use it for ages :0

thanks Donglt

[lorienm Friend lorienmJoin date: June 2008Posts: 12Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#358875

<em>@dslater04 191614 wrote:</em><blockquote>Hi all,

I have maybe a strange question.

I was hoping someone could tell me how I might change the JA Slideshow so that the item changes if you HOVER over it… at the moment you click an item on the slideshow to change it… is it possible for it to change if we just hover over the item ?

In addition, I’d like it if when i CLICK 1 of the items that it will act as “Read more” and goto the page it is linked too..

I hope this is possible. it would make this module awesome 😀

Thanks,

David</blockquote>

I need to do the exact same thing. Has anyone figured out how to do this?

Thanks,
Jon

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#358895

<em>@lorienm 198380 wrote:</em><blockquote>I need to do the exact same thing. Has anyone figured out how to do this?

Thanks,
Jon</blockquote>

Hi Jon,
Plz try to do as my second post.

[lorienm Friend lorienmJoin date: June 2008Posts: 12Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#358897

Hi dongIt,

Thank you. I did do as your first post and that took care of making the slideshow change on hover rather than click. What I would also like to do is as dslater04 mentioned:

<blockquote>n addition, I’d like it if when i CLICK 1 of the items that it will act as “Read more” and goto the page it is linked too..</blockquote>

[[Updated]]
Figured it out. Just had the link code in the wrong div. To implement @dslater04‘s original request, follow these instructions.
Changes to original code are in red

1. In script.php change handle_event and comment out button_event:

var JASlideshowThree = new Class({
initialize: function(options){
this.options = $extend({
buttons : {},
interval:5000,
handle_event: 'mouseenter', //JM EDIT 'mouseenter'
//button_event: 'click', //JM EDIT
box: {},
size: 240,
mode: 'horizontal',
items:[],
handles:[],
onWalk:{},
handlerBox:null,
animation: 'fade',
animationRepeat: 'true',
autoPlay: false,
languageDirection:null
}, options || {});


1. Add new variable ‘navlink’ to the inset in the article:

<!-- {jaimage main="images/stories/Copiers/SlideShow/sl1-canon.jpg" thumb="images/stories/Copiers/SlideShow/sl1-canon-thumb.jpg" navlink="usedcanoncopiers"}

2. Add ‘navlink’ to the parseImages function in helper.php:

function parseImages( &$row, $params ){
$row->link = $this->getLink( $row );
$text = $row->introtext.$row->fulltext;
$row->date = strtotime ( $row->modified ) ? $row->created : $row->modified;
$row->thumbnail = '';
$row->mainImage = '';
$row->navlink = ''; //JM ADD
$data = $this->parserCustomTag( $text );
if( isset($data[1][0]) ){
$tmp = $this->parseParams( $data[1][0] );
$row->mainImage = isset($tmp['main']) ? $tmp['main']:'';
$row->thumbnail = isset($tmp['thumb']) ?$tmp['thumb']:'';
$row->navlink = isset($tmp['navlink']) ? $tmp['navlink']:''; //JM ADD
} else {
$regex = "/<img.+srcs*=s*"([^"]*)"[^>]*>/";
preg_match ($regex, $text, $matches);
$images = (count($matches)) ? $matches : array();
if (count($images)){
$row->mainImage = $images[1];
$row->thumbnail = $images[1];
$row->navlink = $images[1]; //JM ADD
}
}
}


3. Add a new function right below the renderImage function in helper.php which is a striped down version of renderImage:

function rendernavlink( $title, $image, $params, $width = 0, $height = 0, $attrs='', $returnURL=false ) {
global $database, $_MAMBOTS, $current_charset;
if ( $image ) {

$image = JURI::base().$image;

} else {
$image = '';
}
// clean up globals
return $image;
}

4. Added navlink code to the navigation div handler in default_articles.php:

<p class="ja-slide-thumbs-handles">
<?php foreach( $list as $item ) : ?>
<span onclick="location.href='<?php echo $helper->rendernavlink ( $item->title, $item->navlink, $params ); ?>';"> </span>
<?php endforeach; ?>
</p>

That should do it. So now when a user hovers their mouse over a tab in the navigation area on the left, the slideshow will scroll to that image and when the user clicks on a tab in the navigation area, it will go to the link specified in the article setting for ‘navlink’. This is a rough hack, so it may not work for all.

Hope this helps others,
Jon

2 users say Thank You to lorienm for this useful post

1. Don Lee
2. shotley

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#358916

Jon,
When getting the idea of @dslater04, I had tried to customize the module for him but after that I realised that I would need to turn up the module, might re-write it to become another, all are in order to handle the script to detect click event on nav, detect the link that is correlative to it to make a click on. So in this case, I don’t encourage you guys to modify and will not able to come up any solutions 🙁

[lorienm Friend lorienmJoin date: June 2008Posts: 12Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#359013

I figured it out!!! 🙂

See my updated post above for instructions.

Thanks for your help!
Jon

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#359037

<em>@lorienm 198550 wrote:</em><blockquote>I figured it out!!! 🙂

See my updated post above for instructions.

Thanks for your help!
Jon</blockquote>

wow, well done Jon!

[syncrocrick Friend syncrocrickJoin date: March 2010Posts: 59Downloads:0Uploads:2 Thanks: 3]

#362028

Hi!

This is exactly what i was looking for.

2 questions from a newbie…:

Where can I find script.php? I can’t seem to find it, maybe I am missing something.

What do mean by the article “inset”?

. Add new variable ‘navlink’ to the inset in the article:

Code:

<!– {jaimage main=”images/stories/Copiers/SlideShow/sl1-canon.jpg” thumb=”images/stories/Copiers/SlideShow/sl1-canon-thumb.jpg” navlink=”usedcanoncopiers”}

Thank you very much!

[Author]

Posts