- Posts: 1
- Thank you received: 0
How to add lightbox effect?
-
Aori
Inactive member - Topic Author
- New Member
Less
More
13 years 5 months ago #9542
by Aori
How to add lightbox effect? was created by Aori
Sorry if my question is stupid, I'm not a developer, but I really need to open images in a carousel with lightbox. If someone did this, please share the experience!
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 5 months ago #9557
by ivan.milic
Replied by ivan.milic on topic Re: How to add lightbox effect?
You would have to modify modules\mod_hot_joomla_carousel\tmpl\default.php
there is code like this in two places:
you would need to wrap <img tag with <a href="..." ><img ... /></a></li> .
You could create folder for big images as sub folder of folder used by carousel. Then href attribute for a you coud make as:
<a href=".$carouselImagesPath.'/FOLDER_NAME/'.$infinite_pic[$loop]."
On the end you wold need to call this script:
jQuery(document).ready(function(){
if(jQuery('.hotcarousel .foo A')[0])
jQuery('.hotcarousel .foo A').lightbox();
});
there is code like this in two places:
Code:
echo '<li><img src="'.$carouselImagesPath.'/'.$infinite_pic[$loop].'" alt="" width="'.$imageWidth.'" height="'.$imageHeight.'" /></li>';
you would need to wrap <img tag with <a href="..." ><img ... /></a></li> .
You could create folder for big images as sub folder of folder used by carousel. Then href attribute for a you coud make as:
<a href=".$carouselImagesPath.'/FOLDER_NAME/'.$infinite_pic[$loop]."
On the end you wold need to call this script:
jQuery(document).ready(function(){
if(jQuery('.hotcarousel .foo A')[0])
jQuery('.hotcarousel .foo A').lightbox();
});
The following user(s) said Thank You: Zantrolhos
Please Log in to join the conversation.
-
Zantrolhos
Inactive member - New Member
Less
More
- Posts: 1
- Thank you received: 0
13 years 2 months ago #11868
by Zantrolhos
Replied by Zantrolhos on topic Re: How to add lightbox effect?
hi,
i'm a newbie. i want to know how do i change the fade effect.
for example, i have 3 images and the 3 images appear at the same time, i want them to appear one by one. how can i do it? :x
hope you can help!
thanks in advance
Sorry for my poor english.
cumps,
Rui gomes
i'm a newbie. i want to know how do i change the fade effect.
for example, i have 3 images and the 3 images appear at the same time, i want them to appear one by one. how can i do it? :x
hope you can help!
thanks in advance
Sorry for my poor english.
cumps,
Rui gomes
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 2 months ago - 13 years 1 week ago #11882
by ivan.milic
Replied by ivan.milic on topic Re: How to add lightbox effect?
To change animation type use "Transition Effect" parameter, you can chose between slide and fade. For number of displayed images use "Number of images on screen" parameter.
Last edit: 13 years 1 week ago by ivan.milic.
Please Log in to join the conversation.
-
ele_
Inactive member - New Member
Less
More
- Posts: 1
- Thank you received: 0
13 years 1 week ago #13198
by ele_
Replied by ele_ on topic Re: How to add lightbox effect?
Hi, me too i would like to add lightbox to joomla carousel, when i click i would like to open the large image into a lightbox.
Can you teach me, how to?
thank'you.
Eleonora
Can you teach me, how to?
thank'you.
Eleonora
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 1 week ago - 13 years 1 week ago #13224
by ivan.milic
Replied by ivan.milic on topic Re: How to add lightbox effect?
You first need to have lighgbox reference added.
Then you need to alter carousel php , open:
modules\mod_hot_joomla_carousel\tmpl\default.php
change to:
then you need to add script to create lightbox:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(function() {
if(jQuery('.hotcarousel UL LI a')[0])
jQuery('.hotcarousel UL LI a').lightBox();
});
});
</script>
you can just add this script block at the end of that default.php
If you can not handle this by yourself we can do custom job for you.
Then you need to alter carousel php , open:
modules\mod_hot_joomla_carousel\tmpl\default.php
Code:
for ($loop = 0; $loop <= $infinite_pics_number; $loop += 1) {
$pic_type = explode(".", $infinite_pic[$loop]);
if ((($pic_type[1]=="jpg")or($pic_type[1]=="gif"))or(($pic_type[1]=="jpeg")or($pic_type[1]=="png"))) {
echo '<li><img src="'.$carouselImagesPath.'/'.$infinite_pic[$loop].'" alt="" width="'.$imageWidth.'" height="'.$imageHeight.'" /></li>';
echo "\n";
}
}
change to:
Code:
for ($loop = 0; $loop <= $infinite_pics_number; $loop += 1) {
$pic_type = explode(".", $infinite_pic[$loop]);
if ((($pic_type[1]=="jpg")or($pic_type[1]=="gif"))or(($pic_type[1]=="jpeg")or($pic_type[1]=="png"))) {
echo '<li><a href="'.$carouselImagesPath.'/'.$infinite_pic[$loop].'" ><img src="'.$carouselImagesPath.'/'.$infinite_pic[$loop].'" alt="" width="'.$imageWidth.'" height="'.$imageHeight.'" /></a></li>';
echo "\n";
}
}
then you need to add script to create lightbox:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(function() {
if(jQuery('.hotcarousel UL LI a')[0])
jQuery('.hotcarousel UL LI a').lightBox();
});
});
</script>
you can just add this script block at the end of that default.php
If you can not handle this by yourself we can do custom job for you.
Last edit: 13 years 1 week ago by ivan.milic.
Please Log in to join the conversation.
Time to create page: 0.101 seconds