Hi there, nice work!!, I am trying to develop a little component for Joomla! that will use the e2 photo gallery to display, of course, a gallery, but I am having some problems to display the next/prev anchor images, they are shown when the gallery is loading but once loaded they disappear.
Does anybody have an idea of where to start looking for a bug?.
Do you have sample? If not, look at the javascript. The next/prev is all controlled by the javascript. Start looking there.
it doesn't seem to be a javascript issue. I tried to be carefull with the paths to the js libraries which in case of Joomla! have necessarily to be changed.
I looked more deeply inside my code and it seems that is just a matter of the CSS style sheet. Are this style sheets coded specifically for using just as the home page says?, I noticed that they use absolute positioning, and may be they are using wrong positions for my template.
This is the code that I'm using, it's quite extensive, but I hope it helps (getfolders.php is correctly included - with a require_once() - : at the beginning of the script):
function showGallery($abspath)
{
global $mainframe;
?>
<style>
img {
border:none;
}
</style>
<?php
$mainframe->addCustomHeadTag('<link rel="stylesheet" type="text/css"'
.' href="components/com_e2gallery/e2/css/e2.css" title="default">');
$mainframe->addCustomHeadTag(
'<link rel="alternate stylesheet" type="text/css"'
.' href="components/com_e2gallery/e2/css/e2photo_lightgray.css" title="lightgray">'
);
$mainframe->addCustomHeadTag(
'<link rel="alternate stylesheet" type="text/css" '
.' href="components/com_e2gallery/e2/css/e2photo_gray.css" title="gray">'
);
$mainframe->addCustomHeadTag(
'<link rel="alternate stylesheet" type="text/css" '
.' href="components/com_e2gallery/e2/css/e2photo_black.css" title="black">'
);
$mainframe->addCustomHeadTag(
'<link rel="alternate stylesheet" type="text/css" '
.' href="components/com_e2gallery/e2/css/e2photo.css" title="none">'
);
$transitionspeed = 150;
$fadespeed = 600;
$thumbpath = $abspath.'/thumbs';
?>
<script type="text/javascript" src="components/com_e2gallery/e2/js/mootools.v1.11.js">
</script>
<script type="text/javascript">
var transspeed=<?php echo $transitionspeed;?>;
var fadespeed=<?php echo $fadespeed;?>;
</script>
<script type="text/javascript" src="components/com_e2gallery/e2/js/e2photo.js">
</script>
<script type="text/javascript" src="components/com_e2gallery/e2/js/styleswitcher.js">
</script>
<script type="text/JavaScript">
<?php getImages($abspath, 'tempgallery'); ?>
var firstimagewidth=currentwidth;
var firstimageheight=currentheight;
var thumbnailnum = <?php echo count(scandir($thumbpath)); ?>;
var maxthumbvisible = 10;
</script>
<script type="text/javascript" src="components/com_e2gallery/e2/js/e2photo2.js">
</script>
<div class="e2_photo_gallery">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<div id="gallery" align="center">
<!--Main Image Here-->
<div id="main_image_wrapper">
<div id="iptc_btn"></div>
<?php getfirstimage($abspath, "tempgallery"); ?>
<div id="pn_overlay"> <a href='javascript:previmage(current_imgid);' id='prev' class=".toolTip" tooltitle="Previous Image" ></a> <a href='javascript:nextimage(current_imgid);' id='next' tooltitle="Next Image"></a> </div>
</div>
<div align="center" class="spacing"> </div>
<!--End Main Image-->
<div id="thumbdisplay">
<div align="center" id="photocount">
<script type="text/javascript">document.write("1 of "+tempgallery.length+" Photos");</script>
</div>
<div id="thumbtoggler"> <a href="#" onclick="setActiveStyleSheet('none'); return false;"> <img src="components/com_e2gallery/e2/rsrc/none.gif" alt="Minimalistic" class="toolTips"
title="Minimalistic::Click to Display Simple Design Version" /> </a> <a href="#" onclick="setActiveStyleSheet('lightgray'); return false;"> <img src="components/com_e2gallery/e2/rsrc/lightgray.gif" class="toolTips"
title="Light Gray Design::Click to Display Light Gray Design Version"
alt="Light Gray Design" /> </a> <a href="#" onclick="setActiveStyleSheet('gray'); return false;"> <img src="components/com_e2gallery/e2/rsrc/gray.gif" class="toolTips"
title="Dark Gray Design::Click to Display Dark Gray Design Version"
alt="Dark Gray Design" /> </a> <a href="#" onclick="setActiveStyleSheet('black'); return false;"> <img src="components/com_e2gallery/e2/rsrc/black.gif" class="toolTips"
title="Black Design::Click to Display Black Design Version"
alt="Black Design" /> </a> <a href="#" onclick="setActiveStyleSheet('default'); return false;"> <img src="components/com_e2gallery/e2/rsrc/e2.gif" class="toolTips"
title="(E)2 Design::Click to Display (E)2 Design Design Version" alt="(E)2 Design" /> </a> <img src='components/com_e2gallery/e2/rsrc/info_btn.gif' onclick='loadinfo();' border="0"
class="toolTips" title="Show IPTC Info::Click to Display IPTC Info" alt="Show IPTC Info" /> <a href="javascript:thumbs();" ><img src="components/com_e2gallery/e2/rsrc/thumbgallery.gif"
border="0" class="toolTips" title="Toggle Thumbnails::Click to Toggle Thumbnails"
alt="Toggle Thumbnails" /> </a> </div>
<div class="clear"></div>
</div>
<div align="center" class="spacing"> </div>
<div id="thumbhide">
<div id="thumbbox">
<div id="thumb_container">
<div id="thumbgall">
<div id="thumbs">
<div id="widthbox">
<?php getthumbnailimages($abspath, 'tempgallery', $thumbpath); ?>
</div>
</div>
</div>
</div>
<div id="back">
<script type="text/javascript">if(thumbnailnum>maxthumbvisible){document.write("<div id='leftmore'><ul><li><a href=\"javascript:checkbutton(addposition('minus'));movethumbs('plus');\"><img src='components/com_e2gallery/e2/rsrc/buttonblank.gif' width='15' height='115' border='0' /></a></li></ul></div>");}</script>
</div>
<div id="more">
<script type="text/javascript">if(thumbnailnum>maxthumbvisible){document.write("<div id='rightmore'><ul><li><a href=\"javascript:checkbutton(addposition('plus'));movethumbs('minus');\"><img src='components/com_e2gallery/e2/rsrc/buttonblank.gif' width='15' height='115' border='0' /></a></li></ul></div>");}</script>
</div>
</div>
</div>
<div align="center" class="spacing"> </div>
<div id="imgtitle"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}Are the button clickable but not showing the bg images? If so then yes the include of the button images path is set in the CSS, if you figure out the path to that background images in the CSS it might fix your problem. The are set to absolute positioning inside another dive that is set to relative, so the positioning is absolute to the relative div.
I have taken a few snapshots that illustrate the problem. Although weird, FF behaves as I described above but IE shows the links, but not at the right position.
Look at:
http://www.rustytrack.com/gallery_loading.png
http://www.rustytrack.com/gallery_loaded.png
http://www.rustytrack.com/gallery_ie.png
Sorry, I forgot to request some directions to properly change the dimensions of the gallery. Would you provide a list of settings that should be changed to do so?, I think that my component should provide a way of adjusting gallery dimensions by means of back-end settings, so I will need to code some php to do so.
I would like to know, also, if you'd be interested in working in this project providing some help on the gallery front-end to make the adjustments that would be neccessary, while I'd take care of the gallery back-end and the rest of the functionality. I would create a project under joomla forge and coordinate works using SVN.
You must log in to post.
