Hi... ok I am soooo extremely new to using COUCH but so far I think it is absolutely wonderful!! However being a COMPLETE newbie to COUCH I would like to request help with the following:
I have a Colorbox gallery that I have setup for a client. You can view the gallery page here:
http://ezautosales.biz/sacjobs/sys/gallery.php
As you can see there is a grid of thumbnails for the gallery... however there is also the option to change the gallery view to display details related to each image next to each thumbnail in a vertical list down the page. If you click the 2 icons in the top right hand corner of the gallery grid you can see how the gallery toggles back and forth between the grid view and the view for the detailed list of images.
If anybody could provide me the proper code in order to make the thumbnails (which should be linked to the larger images that open in the colorbox window when clicked) as well as the description text for each image that you see in the "detailed list" view of the gallery editable so that my client can easily add new images with the description text to the gallery as well as edit/change existing descriptions and images I would be forever grateful! I have read every post in the forum related to images, galleries, colorbox, lightbox, etc. and I just do not seem to understand where to even begin even though I have gone over each related post time and time again. Please any help would be so very much appreciated.
Here is my code for the gallery page so far:
Thank you in advance... and thank you for the wonderful work you have done creating COUCH. So far it has been so much better than any other CMS platform I have attempted to integrate by far!!
I have a Colorbox gallery that I have setup for a client. You can view the gallery page here:
http://ezautosales.biz/sacjobs/sys/gallery.php
As you can see there is a grid of thumbnails for the gallery... however there is also the option to change the gallery view to display details related to each image next to each thumbnail in a vertical list down the page. If you click the 2 icons in the top right hand corner of the gallery grid you can see how the gallery toggles back and forth between the grid view and the view for the detailed list of images.
If anybody could provide me the proper code in order to make the thumbnails (which should be linked to the larger images that open in the colorbox window when clicked) as well as the description text for each image that you see in the "detailed list" view of the gallery editable so that my client can easily add new images with the description text to the gallery as well as edit/change existing descriptions and images I would be forever grateful! I have read every post in the forum related to images, galleries, colorbox, lightbox, etc. and I just do not seem to understand where to even begin even though I have gone over each related post time and time again. Please any help would be so very much appreciated.
Here is my code for the gallery page so far:
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Our Work' />
<!DOCTYPE html SYSTEM "http://www.sacdesigner.net/xhtml1-iframe.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sculpt Your Stone- An Artificial Rock Making Process - Our Work</title>
<!-- ////////////////////////////////// -->
<!-- // Start Stylesheets // -->
<!-- ////////////////////////////////// -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/custom-style.css" rel="stylesheet" type="text/css" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/noscript.css" rel="stylesheet" type="text/css" media="screen,all" id="noscript" />
<!-- ////////////////////////////////// -->
<!-- // Javascript Files // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/filterable.pack.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Corner Setting for IE8
$("#pagetitle-wrapper").corner("8px");
// Portfolio Setting
$('#controls a').click(function(){
var r = $(this).attr('rel');
var c = $('#portfolio').attr('class');
if (r != c) {
$('#controls a').removeClass('active');
$(this).addClass('active');
$('#portfolio').fadeOut(100, function(){
$('#portfolio').removeAttr('class');
$('#portfolio').addClass(r);
$('#portfolio').fadeIn(100);
});
}
});
});
//Colorbox Jquery
$(document).ready(function(){
$("a[rel='portfolio']").colorbox({transition:"fade"});
$(".login").colorbox({width:"400px"});
});
// Background Slide Setting
var scrollSpeed = 50; // speed in milliseconds
var current = 0; // set the default position
var direction = 'h'; // set the direction
function bgscroll(){
current -= 1;
$('div#glow-bg-inner').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}
setInterval("bgscroll()", scrollSpeed);
</script>
</head>
<body>
<div id="container">
<div id="top-container-inner">
<div id="glow-bg-inner">
<!-- BEGIN OF MAINMENU -->
<div id="menu-wrapper">
<div id="menu-container">
<div id="mainmenu">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="products.html">Products</a></li>
<li class="current"><a href="gallery.html">Our Work</a></li>
<li><a href="videos.html">Instructional Videos</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<div id="login-wrapper"><a class="login" href="login.html"><span>Login</span></a></div>
</div>
</div>
<!-- END OF MAINMENU -->
<!-- BEGIN OF HEADER --><br><br> <br><br>
<div><h1> <a href="index.html"><img src="images/logo.png" alt="" /></a></h1><br><br><h3> Our Rock Sculpting Work Speaks For Itself!</h3>
</div>
<!-- END OF HEADER --><br>
<!-- BEGIN OF CONTENT -->
<div id="content">
<div class="maincontent">
<div id="top-content">
<!-- begin of portfolio filter -->
<ul id="portfolio-filter">
<li>For more details on each project please use the icons on the right. For full view of our work, click on the thumbnail of your choice in the gallery.</li>
</ul>
<!-- end of portfolio filter -->
<div id="controls"><a rel="icon" class="active"><img src="images/thumb-select.png" alt="" /></a><a rel="list"><img src="images/list-select.png" alt="" /></a></div>
</div>
<div class="col-1">
<!-- begin of portfolio list -->
<ul id="portfolio" class="icon">
<li class="category1">
<div>
<a href="images/portfolio-big/w-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb.jpg" alt="" /></a>
<h6>Project Name 1</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category2">
<div>
<a href="images/portfolio-big/w2-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb2.jpg" alt="" /></a>
<h6>Project Name 2</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category3">
<div>
<a href="images/portfolio-big/w3-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb3.jpg" alt="" /></a>
<h6>Project Name 3</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category4">
<div>
<a href="images/portfolio-big/w4-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb4.jpg" alt="" /></a>
<h6>Project Name 4</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category1">
<div>
<a href="images/portfolio-big/w5-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb5.jpg" alt="" /></a>
<h6>Project Name 5</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category2">
<div>
<a href="images/portfolio-big/w6-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb6.jpg" alt="" /></a>
<h6>Project Name 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category3">
<div>
<a href="images/portfolio-big/w7-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb7.jpg" alt="" /></a>
<h6>Project Name 7</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category4">
<div>
<a href="images/portfolio-big/w8-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb8.jpg" alt="" /></a>
<h6>Project Name 8</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category1">
<div>
<a href="images/portfolio-big/w9-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb9.jpg" alt="" /></a>
<h6>Project Name 9</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category2">
<div>
<a href="images/portfolio-big/w10-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb10.jpg" alt="" /></a>
<h6>Project Name 10</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category3">
<div>
<a href="images/portfolio-big/w11-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb11.jpg" alt="" /></a>
<h6>Project Name 11</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category4">
<div>
<a href="images/portfolio-big/w12-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb12.jpg" alt="" /></a>
<h6>Project Name 12</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category1">
<div>
<a href="images/portfolio-big/w13-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb13.jpg" alt="" /></a>
<h6>Project Name 13</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category2">
<div>
<a href="images/portfolio-big/w14-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb14.jpg" alt="" /></a>
<h6>Project Name 14</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category3">
<div>
<a href="images/portfolio-big/w15-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb15.jpg" alt="" /></a>
<h6>Project Name 15</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
<li class="category4">
<div>
<a href="images/portfolio-big/w16-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb16.jpg" alt="" /></a>
<h6>Project Name 16</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
<ul class="services-list">
<li>Inventore veritatis et quasi architecto beatae vitae</li>
<li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>
<li>Voluptatibus maiores alias consequatur aut perferendis</li>
<li>Soluta nobis eligendi optio cumque nihil impedit</li>
</ul>
</div>
</li>
</ul>
<!-- end of portfolio list -->
</div>
</div>
<!-- END OF CONTENT -->
<div id="bottom-wrapper">
<div id="bottom-content">
<div class="logofooter-column"> </div>
<div class="contactbottom-column">
<h6>Contact Us</h6>
<p>Toll Free# 855.55.797.8663 <br/>
Terry@sculptyourstone.com <br/>
Matt@sculptyourstone.com </p>
</div>
<div class="linkbottom-column">
<h6>Helpful Links</h6>
<ul class="list-bottom">
<li><a href="links.html">Color Examples</a></li>
<li><a href="links.html">Texture Examples</a></li>
<li><a href="links.html">Pattern Examples</a></li>
</ul>
</div>
<div class="mailingbottom-column">
<h6>Mailing List</h6>
<p>Sign up if you would like to receive occasional tips & tricks from us.</p>
<form id="newsletter" action="#" method="get">
<fieldset class="search-fieldset">
<input type="text" id="nlt-form" value="Your email address..." onblur="if (this.value == ''){this.value = 'Your email address...'; }" onfocus="if (this.value == 'Your email address...') {this.value = ''; }" />
<input type="submit" class="sub-button" value="Go" />
</fieldset>
</form>
</div>
</div>
</div>
<div id="copyright-text">Copyright © 2011 Sculpt Your Stone. All rights reserved | Design by <a href="http://sacdesigner.net">Sacdesigner</a> | <a href="#top" class="scroll">back to top</a> <a href="#top" class="scroll backtop"><img src="images/back-top.png" alt="" /></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">$('#noscript').remove();</script>
<div style="clear:both; width:0; height:0; margin:0 "><br> <br></div>
</body>
</html>
<?php COUCH::invoke(); ?>
Thank you in advance... and thank you for the wonderful work you have done creating COUCH. So far it has been so much better than any other CMS platform I have attempted to integrate by far!!