autoGallery 1.0.RC2 - colorbox intergration

5 Posts

friis.one Reply #1, 17 years, 1 month ago

cool work with the autoGallery http://modxcms.com/extras/package/?package=535

I Have some hints for integration with Modx 1.0 and colorbox

install as mention in autoGallery

add this tags in the autoGalleryItem chunk
(add small gallery pictures that link to colorbox )

 <a class="cboxelement"href=[+imgpath+] rel="gallery" title=[+filename+]> <img src=[+tnpath+]></a>

The colorbox is already implemented in modx 1.0
and you only need to add this in the head of the template

	<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
	<script src="assets/js/jquery.colorbox-min.js" type="text/javascript"></script>
	<link href="assets/js/colorbox.css" rel="stylesheet" media="screen" type="text/css" />
	
	<script type="text/javascript">
		var $s = jQuery.noConflict();
		$s(document).ready(function($){
			$("a[rel='gallery']").colorbox({transition:"none", width:"75%", height:"75%"});
		});
	</script>

and add this code in the top of the body of the template

<div style="display: none; cursor: auto; opacity: 0.9;" id="cboxOverlay"></div>
<div class="" style="padding-bottom: 42px; padding-right: 42px; display: none; height: 471px; width: 700px;
	 top: 142.5px; left: 268px; opacity: 1;" id="colorbox"><div style="height: 513px; width: 742px;" id="cboxWrapper">
	 <div><div style="float: left;" id="cboxTopLeft"></div>
		<div style="float: left; width: 700px;" id="cboxTopCenter"></div>
		<div style="float: left;" id="cboxTopRight"></div></div>
	<div><div style="float: left; height: 471px;" id="cboxMiddleLeft"></div>
		<div style="float: left; height: 471px; width: 700px;" id="cboxContent">
			<div style="display: none; height: 471px;" class="" id="cboxLoadingOverlay"></div>
			<div style="display: none; height: 471px;" class="" id="cboxLoadingGraphic"></div>
			<div style="display: none;" class="" id="cboxTitle"></div>
			<div style="display: none;" class="" id="cboxCurrent"></div>
			<div style="display: none;" class="" id="cboxSlideshow"></div>
			<div style="display: none;" class="" id="cboxNext"></div>
			<div style="display: none;" class="" id="cboxPrevious"></div>
			<div style="display: none;" class="" id="cboxClose"></div></div>
		<div style="float: left; height: 471px;" id="cboxMiddleRight"></div></div>
	<div><div style="float: left;" id="cboxBottomLeft"></div>
	<div style="float: left; width: 700px;" id="cboxBottomCenter"></div>
	<div style="float: left;" id="cboxBottomRight"></div></div>
</div></div>

for gallery usage with Frontend manger with out any conflicts:
please update the file placed: assets/plugins/qm/qm.inc.php
add a line after line 155

 $("a[rel='."'gallery'".']").colorbox({transition:"none", width:"75%", height:"75%"});

or just replace the attach file

2,877 Posts

mrhaw Reply #2, 17 years, 1 month ago

Nice! Will try it! cool

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

31 Posts

andrew4u Reply #3, 17 years, 1 month ago

Thanks for your post!

I have tried your peices of code without any changes and I have a bug in IE6. After viewing a few pictures the content moves away ie blank page. If I view view only one photo out of the whole series and close the fancybox window I see that my page content has moved towards the left. The more photos i view the more left it gets so after a few photos it is not visible. It might be a problem of my layout - bug in connection with my layout.

MODx is way ahead... Thanks for your work!

18 Posts

babumuraya Reply #4, 16 years, 11 months ago

just a weird thought is possible to use the same intergration of colorbox on a maxigallery am trying figure out but if anyone of you just let us know huh

from the colorbox we have this but i don’t know where it goes on modx

<style type="text/css">
body{font:12px/1.5 Verdana, Arial, san-serrif;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px;}
.hidden{display:none;}
</style>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel=’example1’]").colorbox();
$("a[rel=’example2’]").colorbox({transition:"fade"});
$("a[rel=’example3’]").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel=’example4’]").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert(’Howdy, this is an example callback.’);
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$(’#click’).css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>