Page 1 of 1
open the modal box with a simple text link ?
Posted: 15 Jun 2010, 21:28
by Vinyl
Hello,
I'm using Joomla 1 .15.16
Phoca Galery
Phoca Galery Plugin
Phoca Galery Slideshow Plugin
Phoca Galery Button
Everything works fine. Great component !
But I would like to create a text link in an article which would open the modal box with a slide show. The same thing happens when you click on a thumbnails in categories. I would like to do the same but with a simple text link.
Thank you for your help
Re: open the modal box with a simple text link ?
Posted: 17 Jun 2010, 14:07
by jehnik
I have the same problem:
when I insert for example {phocagallery view=category|categoryid=<?php echo $jSeblod->aktualita_galerie_cislo->value; ?>|limitstart=1|limitcount=8|detail=2|type=1} image opens in normal popup. The only time it works is when i set detail to 4 or 5.
Re: open the modal box with a simple text link ?
Posted: 18 Jun 2010, 00:59
by Vinyl
Hello,
Thanx for your answer.
I can make a text link in an article which opens a pop up with a slide show.
I add this link to my text :
Code: Select all
mygallery/3-xxxx/detail/13-xxxxxxxxxxxxxxxxxxx?tmpl=component
Then, with jce, i choose "JCE pop up".
So it works but i would like to use a way without jcepopup... A simple way...
Re: open the modal box with a simple text link ?
Posted: 21 Jun 2010, 22:16
by Vinyl
Hi !
So nobody knows how to add a link in an article which would open a slide show in a modal box ?
Samething as phocca gallery button plugin but with atext link ...
Maybe i shoul add my question to the "Feature Request" section ?
Re: open the modal box with a simple text link ?
Posted: 22 Jun 2010, 13:21
by imperialWicket
It seems to me that you solved your problem already, JCE is providing you with a way to popup a modal window with your desired content. If you want to provide this same functionality without using the supplemental JCE utility, you simply need to add a blank target to your link (easiest in <> html view for most editors):
If you make sure that the appropriate javascript libraries are available on your content pages, a link like the following will work (this is using SEF URLs).
Code: Select all
<a class="modal-button" title="Whatever Title You Want" href="/photo-gallery/3-phoca-category/detail/100-the-phoca-image-alias?tmpl=component" rel="{handler: 'iframe', size: {x: 618, y: 550}, overlayOpacity: 0.3}" target="_blank" >Whatever Text You Want</a>
Note that this is nearly identical to the image links Phoca Gallery uses to display the modal popup (in the category display, for example), the only difference is that the link is text, and not a thumbnail.
Creating something more simple than this would require a plugin for your editor, not an update to the Phoca Gallery or its plugins. In the end, all that editor plugin would do is provide a selection list and then populate the html with the aforementioned code snippet.
Re: open the modal box with a simple text link ?
Posted: 25 Jun 2010, 06:15
by coober
Hello,
I can not get the modal box to open from a text link, not too sure what I'm missing, but it just doesn't work. If somebody can tell me what to so in layman's terms I would really appreciate it.
also
If somebody could tell me if it's possible and if so how to open the modal box from a single thumbnail.
many thanks
David
Re: open the modal box with a simple text link ?
Posted: 25 Jun 2010, 13:48
by imperialWicket
The link in my previous post will open a modal popup. It does depend on some stylesheets and some javascript. You will need to be sure that you include the full Phoca Gallery head tag contents. I'm reasonably confident that you only need some of these scripts and stylesheets, but have not devoted any time to troubleshooting which are necessary and which go unused by the modal popup. Hence, add them all.
In short, here is a Joomla 1.5.18 head tag from a fairly default Home page:
Code: Select all
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Joomla 1518</title>
<link href="/joomla1518/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/joomla1518/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/joomla1518/templates/rhuk_milkyway/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="/joomla1518/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/joomla1518/media/system/js/caption.js"></script>
<link rel="stylesheet" href="/joomla1518/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/joomla1518/templates/rhuk_milkyway/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
And here is the head tag from a Phoca Gallery category view page in the same default installation (the only customization is the Phoca Gallery installation):
Code: Select all
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Colored fonts - fonts and colors</title>
<link href="/joomla1518/templates/rhuk_milkyway/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/joomla1518/components/com_phocagallery/assets/phocagallery.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/media/system/css/modal.css" type="text/css" />
<script type="text/javascript" src="/joomla1518/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/joomla1518/media/system/js/modal.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal-button').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
</script>
<!--[if lt IE 8 ]>
<link rel="stylesheet" href="/joomla1518/components/com_phocagallery/assets/phocagalleryieall.css" type="text/css" />
<![endif]-->
<style type="text/css">
#phocagallery .phocaname {color: #b36b00 ;}
.phocagallery-box-file {background: #fcfcfc ; border:1px solid #e8e8e8;margin: 5px;padding: 5px; }
.phocagallery-box-file-first { background: url('/joomla1518/components/com_phocagallery/assets/images/shadow1.gif') 50% 50% no-repeat; }
.phocagallery-box-file:hover, .phocagallery-box-file.hover {border:1px solid #b36b00 ; background: #f5f5f5 ;}
.bgPhocaClass{
background:#666666;
filter:alpha(opacity=70);
opacity: 0.7;
-moz-opacity:0.7;
z-index:1000;
}
.fgPhocaClass{
background:#f6f6f6;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
z-index:1000;
}
.fontPhocaClass{
color:#000000;
z-index:1001;
}
.capfontPhocaClass, .capfontclosePhocaClass{
color:#ffffff;
font-weight:bold;
z-index:1001;
} </style>
<!--[if lt IE 8]>
<style type="text/css">
.phocagallery-box-file-first { background: url('/joomla1518/components/com_phocagallery/assets/images/shadow1.gif') 0px 0px no-repeat; }
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
.phocagallery-box-file{
background-color: expression(isNaN(this.js)?(this.js=1, this.onmouseover=new Function("this.className+=' hover';"),
this.onmouseout=new Function("this.className=this.className.replace(' hover','');")):false););
}
</style>
<![endif]-->
<style type="text/css">
#sbox-window {background-color:#6b6b6b;padding:2px}
#sbox-overlay {background-color:#000000;}
</style>
<link rel="stylesheet" href="/joomla1518/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/joomla1518/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/joomla1518/templates/rhuk_milkyway/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
If you don't include the Phoca Gallery additions in the head tag, your page will encounter missing css definitions and javascript function/var not found errors. Updating the head tag as above and including the link from my previous post will display a modal popup with slideshow. Replace the text in the link with a thumbnail image and you should have a thumbnail that starts a slideshow (NOTE: It is likely that you will need to handle the logic for ensuring that your thumbnail will be one of the images included in the slideshow).
Something like this works for me (assuming the head tag content is appropriate and the paths find an actual Phoca Gallery image and a thumbnail file):
Code: Select all
<a class="modal-button"
title="The Link Title"
href="/photo-gallery/3-phoca-category/detail/100-the-phoca-image-alias?tmpl=component"
rel="{handler: 'iframe', size: {x: 618, y: 550}, overlayOpacity: 0.3}"
target="_blank" >
<img src="/images/phocagallery/path/to/image/dir/thumbs/phoca_thumb_s_FILENAME.jpg"
alt="The Alt Text" />
</a>
Hope this helps.
Re: open the modal box with a simple text link ?
Posted: 26 Jun 2010, 01:02
by coober
ImperialWicket,
thank you for a most comprehensive reply, there is more to setting up a text link than I thought there would be.
I will try with the code you have posted, but I think I may well be asking for some more advice.
kindest regards
David
Re: open the modal box with a simple text link ?
Posted: 30 Jun 2010, 13:33
by Vinyl
@ imperialWicket
Thank you very much for your answer. It's clear, thank you for the time you spent to answer...
It seems to me that you solved your problem already, JCE is providing you with a way to popup a modal window with your desired content.
Right ! I was just wondering if an easier way was possible (using jce pop and copy/paste the right code of the phoca gallery is not simple for a newbie (i mean a simple user who do not writte code). So my idea was to find a kind of button (like the phoca button) to create link. I'm sure it's a feature which would be great for joomla user (create a link in article which open a slide show with a simple button !).
Creating something more simple than this would require a plugin for your editor, not an update to the Phoca Gallery or its plugins.
You're right. But don't you think we could add this functionnality to the "phoca button" ?
ll that editor plugin would do is provide a selection list and then populate the html with the aforementioned code snippet.
I'm using JCE, i'll ask to JCE team what they think about add a button "phoca slideshow" in their editor.
Thank again for your explanations...
Re: open the modal box with a simple text link ?
Posted: 30 Jun 2010, 20:34
by imperialWicket
@Vinyl
Glad to help.
The only issue with adding this functionality to the Phoca Gallery Button Plugin is that these updates require the presence of particular stylesheets and javascript libs. Since the button integrates with the editor and works at the article level, we lose the guarantee that those required stylesheets and javascript libs are present on the page where the article will display. At that point, you need the end user to manually edit their template(s) in order to gain the full functionality of the Phoca Gallery Button Plugin. While this would work, it does not strike me as a very user friendly solution as far as the plugin is concerned.
I think this issue will cause difficulties for the JCE team as well.
That said, I have not spent much time in the editor code, so I may be overlooking a possible alternative solution. I will do some more investigation as I have time. For now, I think we're limited to a little bit of hacking to get the job done.