Listit2 and FancyBox

[OmarDoleymi]

Hi How is everyone doing?

I am using CMS Version 1.11.11

I have installed Listit2 module and it is working fine except for one thing, to help explain the problem more

please follow the link and go to Work Tab

http://omardulaimi.com/

I am trying to post an item for each project, and trying to call aa pop up box that will contain more details/description for each single project,

the problem (if you click on the boxes) is that the module is loading the same text for both projects. even though I have a different description for each of them

This is the template I am using:

Code: Select all

			
<ul id="portfolio">
		{foreach from=$items item=item}
<li class="item col-md-4 webdesign">
<a class="fancybox" href="#inline">
<div class="folio-img"><img class="img-responsive" alt="{$item->Thumb|cms_escape}" src="images/projects/{$item->Thumb|cms_escape}" />
	<div class="overlay">
		<div class="overlay-inner">
			<h4>{$item->title|cms_escape}</h4>
			<p>{$item->myworkcontent}</p>
		</div>
	</div>
</div>
</a></li>
{/foreach}
</ul>


{foreach from=$item item=inline}
<div id="inline" style="width:400px;display: none;">
<p>
			{$item->inline}
		</p>
	</div>

{/foreach}

as for the inline option in FancyBox (http://fancybox.net/)

it consists of <a> tag and a <div>


where each <a> tag will contain an anchor for each div

example:

Code: Select all

<ul>
<li><a class="fancybox" href="#inline1"> text 1</a></li>

<li><a class="fancybox" href="#inline2">text 2</a></li>
</ul>

<div id="inline1" style="width:400px;display: none;">
		<p>paragraph 1</p>
</div>

<div id="inline2" style="width:400px;display: none;">
		<p>paragraph 2</p>
</div>

How can I solve this problem? I am relatively new to CMS made simple...

Thank you all for your time

[Jo Morg]

You have:

Code: Select all

.......
{foreach from=$items item=item}
  .......
{/foreach}
.......
{foreach from=$item item=inline}
  .......
  {$item->inline}
  .......
{/foreach}

The last foreach only iterates the inline of the last item, as is.
I think you need to nest the foreach logic.

Code: Select all

.......
{foreach from=$items item=item}
  .......
  {foreach from=$item item=inline}
    .......
    {$item->inline}
    .......
  {/foreach}
  .......
{/foreach}
.......

[Dr.CSS]

Probably help if you clean up your HTML first...

http://validator.w3.org/check?verbose=1 ... .com%2F%23

[OmarDoleymi]

Thanks Guys,


the issue is not with the "messy" HTML however I will clean up the HTML once the issue is solved lol, thanks for the tip though


@ Jo Morg I tried that before and again now , it did not work,

the inline option in fancy box allows you to call a specific popup for each item you have on a list.

so when you click on the item1 it will pop up text1, or if you click on item2 it will pop up text 2, etc... which is controlled by an anchor and an id ..
is there a code where you can capture a specific value with in an item??

[OmarDoleymi]

Thank you guys again for replying to my post and trying to help a newbie

Update: Problem has been solved... it was simpler than I expected

in order to call the "hidden" div.. you require a unique id for each item, the alias worked just fine..

{$item->alias} as an Href and as an id solved my problem

Code: Select all

<ul id="portfolio">

{foreach from=$items item=item}

<li class="item col-md-4 webdesign">

<a class="fancybox" href="#{$item->alias}">

<div class="folio-img">
...........
</div>
</a>}

<div id="{$item->alias}" style="width: 400px; display: none;">
......................
</div>

</li>
{/foreach}

</ul>