Joomla Templates Club 406,261 posts

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

#173974

I’m using JA content slider to display images from a subfolder. When I click on these images in the slider, it opens up in the same window (larger version).

I would like to know if there might be a possibility to open the image in a light box if clicked on please.

Thank you in advance.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#438787

Hi jacostander,

you can modify as follow steps to get the image open in a box when it’s clicked instead of open it in the same window
1) open the file of modulesmod_jacontentsliderhelper.php you look for this line of code
[PHP] $image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image”>’ . $image . ‘</a>’;[/PHP]
change it to
[PHP] $image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image modal” rel=”{handler: ‘image’, size: {x: 800, y: 500}}” >’ . $image . ‘</a>’;[/PHP]

2) open the file modulesmod_jacontentslidermod_jacontentslider.php you would see this line of code
[PHP] $mainframe = & JFactory::getApplication(); [/PHP]

replace it by
[PHP]
$mainframe = & JFactory::getApplication();
JHtml::_(‘behavior.modal’, ‘a.modal’);
[/PHP]
3) open the js file modulesmod_jacontentsliderassetsjsja_contentslider.js
look for this function

loadImage: function(el) {
var holder = el.getElement(“.ja-image”);
if(holder){
var image = holder.getProperty(‘rel’);
if(image != ” && image != null) {
holder.setHTML(image);
holder.setProperty(‘rel’, ”)
}
}
},

change it to
loadImage: function(el) {
var holder = el.getElement(“.ja-image”);
if(holder){
var image = holder.getProperty(‘rel’);
if(image != ” && image != null) {

}
}
},
and look for this

//Update element i
update: function (text, ind){
divobj = new Element(‘DIV’, {‘id’:’jsslide_’ + ind, ‘class’:’jsslide’});
divobj.innerHTML = text;
divobj.setStyle (‘position’,’absolute’);
divobj.setStyle (‘z-index’,1);
divobj.setStyle(‘width’, this.options.w);
divobj.setStyle(‘height’, this.options.h);
divobj.inject (this.options.wrapper);
this.hide(divobj);
this.elements = divobj;
},

change it to

//Update element i
update: function (text, ind){
divobj = new Element(‘DIV’, {‘id’:’jsslide_’ + ind, ‘class’:’jsslide’});
divobj.innerHTML = text;
divobj.setStyle (‘position’,’absolute’);
divobj.setStyle (‘z-index’,1);
divobj.setStyle(‘width’, this.options.w);
divobj.setStyle(‘height’, this.options.h);
divobj.inject (this.options.wrapper);
this.hide(divobj);
modal = divobj.getElements(“a.modal”);
SqueezeBox.assign(modal, {
parse: ‘rel’
});
this.elements = divobj;
},

4 users say Thank You to Sherlock for this useful post

1. jacostander
2. swissa
3. Arvind Chauhan
4. Markus

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

#438833

Hi,

Thank you so much for your assistance, will try this. Thank you!

UPDATE:

Works 100% Thank you very much!

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

#438835

I do have another question, I have 2 content sliders, and one with data from images the other from content.

When I click on the image displayed from content, a light box open and display “an error has accrued”

Any ideas how to ix this or to disable the click on the image please?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#438957

<em>@jacostander 301295 wrote:</em><blockquote>I do have another question, I have 2 content sliders, and one with data from images the other from content.

When I click on the image displayed from content, a light box open and display “an error has accrued”

Any ideas how to ix this or to disable the click on the image please?</blockquote>

You can try as following to allow lightbox only if data from image
open the file of modulesmod_jacontentsliderhelper.php you replace this line
[PHP] $image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image modal” rel=”{handler: ‘image’, size: {x: 800, y: 500}}” >’ . $image . ‘</a>’;[/PHP]

by this block of code
[PHP] $source = $params->get( ‘source’, ‘content’ );
if($source == ‘image’){
$image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image modal” rel=”{handler: ‘image’, size: {x: 800, y: 500}}” >’ . $image . ‘</a>’;
}else{
$image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image”>’ . $image . ‘</a>’;
} [/PHP]

I think that should help !

1 user says Thank You to Sherlock for this useful post

1. jacostander

[gduran144 Friend gduran144Join date: January 2012Posts: 11Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#440418

Hi I was using your solution on my site and was having the same problem with having two content sliders. Your original solution worked great, however when I used the second code the lightbox stopped working for the image content slider. Could you perhaps revist the code above and see what might be wrong?

UPDATE: I just solved this issue. The if($source == ‘image’) statement in the above code was never evaluated to true because the image is in a folder. I changed the if statement to read as follows and it works perfectly. if($source==’folder’

2 users say Thank You to gduran144 for this useful post

1. jacostander
2. Markus

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#440487

Hi gduran144,

Are you choosing the data from image source (Not from article content ) ? if that I think it’s strange if the lightbox no longer work for you, you can pm your url, the admin and ftp account i will take a look at it for you.

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

#440836

My next Question, how can I do the same for the Joomla 1.5 version please?

[melator Friend melatorJoin date: January 2009Posts: 25Downloads:0Uploads:6 Thanks: 5]

#442847

i Want make a link in the image. its possible? for example:

Image 1 – Image 2 – Image 3
when put the image send to a other website… you understand? sorry my poor English…

[Markus Friend MarkusJoin date: February 2012Posts: 35Downloads:99Uploads:9 Thanks: 14 Thanked: 1 times in 1 posts]

#507083

<em>@Sherlock Holmes 301217 wrote:</em><blockquote>Hi jacostander,

you can modify as follow steps to get the image open in a box when it’s clicked instead of open it in the same window
1) open the file of modulesmod_jacontentsliderhelper.php you look for this line of code
[PHP] $image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image”>’ . $image . ‘</a>’;[/PHP]
change it to
[PHP] $image = ‘<a href=”‘ . $link . ‘” title=”” class=”ja-image modal” rel=”{handler: ‘image’, size: {x: 800, y: 500}}” >’ . $image . ‘</a>’;[/PHP]

2) open the file modulesmod_jacontentslidermod_jacontentslider.php you would see this line of code
[PHP] $mainframe = & JFactory::getApplication(); [/PHP]

replace it by
[PHP]
$mainframe = & JFactory::getApplication();
JHtml::_(‘behavior.modal’, ‘a.modal’);
[/PHP]
3) open the js file modulesmod_jacontentsliderassetsjsja_contentslider.js
look for this function

loadImage: function(el) {
var holder = el.getElement(“.ja-image”);
if(holder){
var image = holder.getProperty(‘rel’);
if(image != ” && image != null) {
holder.setHTML(image);
holder.setProperty(‘rel’, ”)
}
}
},

change it to
loadImage: function(el) {
var holder = el.getElement(“.ja-image”);
if(holder){
var image = holder.getProperty(‘rel’);
if(image != ” && image != null) {

}
}
},
and look for this

//Update element i
update: function (text, ind){
divobj = new Element(‘DIV’, {‘id’:’jsslide_’ + ind, ‘class’:’jsslide’});
divobj.innerHTML = text;
divobj.setStyle (‘position’,’absolute’);
divobj.setStyle (‘z-index’,1);
divobj.setStyle(‘width’, this.options.w);
divobj.setStyle(‘height’, this.options.h);
divobj.inject (this.options.wrapper);
this.hide(divobj);
this.elements = divobj;
},

change it to

//Update element i
update: function (text, ind){
divobj = new Element(‘DIV’, {‘id’:’jsslide_’ + ind, ‘class’:’jsslide’});
divobj.innerHTML = text;
divobj.setStyle (‘position’,’absolute’);
divobj.setStyle (‘z-index’,1);
divobj.setStyle(‘width’, this.options.w);
divobj.setStyle(‘height’, this.options.h);
divobj.inject (this.options.wrapper);
this.hide(divobj);
modal = divobj.getElements(“a.modal”);
SqueezeBox.assign(modal, {
parse: ‘rel’
});
this.elements = divobj;
},</blockquote>

Hi all ,

did anyone try this with a Kranos 3.1.1?
I have it kind of working but its still bugged …

This part i couldnt find in the version 3.1.1

2) open the file modulesmod_jacontentslidermod_jacontentslider.ph p you would see this line of code
PHP Code:

$mainframe = & JFactory::getApplication();


replace it by
PHP Code:


$mainframe = & JFactory::getApplication();
JHtml::_('behavior.modal', 'a.modal');



Anyone has an Idea how to get this working on version 3.1.1 ?

Thank you in advance

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

#507620

Did you get it solved?

[Markus Friend MarkusJoin date: February 2012Posts: 35Downloads:99Uploads:9 Thanks: 14 Thanked: 1 times in 1 posts]

#507633

<em>@Saguaros 391849 wrote:</em><blockquote>Did you get it solved?</blockquote>

No i didnt.

Did you ?

[Author]

Posts