I have a template that displays a list of entry titles and images from a custom image field. I wrote some jQuery to show more info from the entry when the image or title is clicked on. I have the jQuery working properly, but I need to figure out how to show more info for only the entry clicked rather than for all entries.
Right now, I have two separate channel entry tags for this jQuery business. The first one displays a grid of the entry titles/images; the second has the additional info in it and is hidden with CSS and shown with jQuery. I assume this is not the way to accomplish my goal, but I don’t know how else to show only one entry (unless I can use EE tags in a .js template).
I saw that you can specify that a template is in JavaScript, does this mean I can use EE tags in my jQuery?
For instance:
$(document).ready(function() {
$(".brand-link").click(
function() {
$(".overlay.{title}").fadeIn("slow");
}
);
$(".close").click(
function() {
$(".overlay.{title}").fadeOut("fast");
}
);
});
I tried this, but it didn’t work, but since I’m new to jQuery, I thought I may be doing something wrong if JavaScript templates do support EE tags.
Here’s my template code:
{html_head}
<title>{site_name}</title>
{css}
{html_head_end}
{embed="site/.header"}
{text-wrap}
<script type="text/javascript">{embed="page/popup"}</script>
{exp:channel:entries
channel="page"
disable="categories|member_data|pagination"
entry_id="31"}
<h2>{title}</h2>
{content-body}
{/exp:channel:entries}
<ul class="brand-grid">
{exp:channel:entries
channel="brands"
disable="categories|member_data|pagination"
orderby="title" sort="asc"}
<li class="brand-in-grid">
{exp:imgsizer:size class="brand-link" src="{brand-logo}" alt="{title}" width="87"}
<span class="brand-link brand-text-link">{title}</span>
</li>
{/exp:channel:entries}
<div class="clear"></div>
</ul>
{exp:channel:entries
channel="brands"
disable="categories|member_data|pagination"
orderby="title" sort="asc"
limit="1"}
<div class="overlay">
<div class="brand-info">
<h2><a href="{brand-url}" target="_blank">{title}</a></h2>
<div class="brand-meta">
<p><strong>Style:</strong> {brand-style}</p>
<p><strong>Color:</strong> {brand-color}</p>
<p><strong>ABV:</strong> {brand-abv}%</p>
<p><strong>Brewer:</strong> {brand-brewer}</p>
</div>
<div class="brand-description">
{brand-description}
<img class="close" src="/images/close.png" alt="close" width="30" height="30" />
</div>
</div><!--brand-info-->
</div><!--overlay-->
{/exp:channel:entries}
{text-wrap-close}
{embed="site/.footer"}
{html_close}
I imagine that’s also not the way I’m supposed to include a .js template…
