Joomla Templates Club 406,261 posts

[suhlaing2014 Friend suhlaing2014Join date: January 2014Posts: 18Downloads:0Uploads:2 Thanks: 4]

#197214

Hi

How to show new page(can be article content) with popup when I click Detail button or click link ?

The popup size should be customizable.

Thanks.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#533063

It would be great if you can include url of your site, an illustrated screenshot of what you are trying to achieve, It would help to understand the issues and give you specific answers.

[suhlaing2014 Friend suhlaing2014Join date: January 2014Posts: 18Downloads:0Uploads:2 Thanks: 4]

#533226

http://ja-biz.demo.joomlart.com/index.php/en/explore/bonus-pages/about-us

For example ‘our team’session in ‘about-us’ page , I need to show detail description for each person by clicking detail button or thumbnail image.

I see Leadership thumbnail is big and has description but I prefer the smaller thumbnail size.

Thanks.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#533274

This is single article html to show in About Us page without not any module in it :


<div class="about-us">
<div class="section lead row">
<div class="col-md-6"><img src="images/joomlart/article/sample-9.jpg" alt="Sample image" /></div>
<div class="col-md-6">
<div class="page-header">
<h1>Get to know about us</h1>
</div>
<p>Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac.Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. lorem tellus Phasellus eu nonummy.</p>
<p>Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum hendrerit et mauris vitae.</p>
</div>
</div>
<h1 class="text-center">Leadership</h1>
<div class="section row">
<div class="col-sm-4">
<div class="thumbnail">
<div class="images"><img src="images/joomlart/about_page/staff-1.jpg" alt="Sample image" />
<div class="images-info"><strong>Sean Thomas</strong>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
</div>
<div class="caption">
<h3>Sean Thomas</h3>
<p>Project Manager</p>
<p>*</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<div class="images"><img src="images/joomlart/about_page/staff-2.jpg" alt="Sample image" />
<div class="images-info"><strong>Bennie Moran</strong>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</div>
</div>
<div class="caption">
<h3>Bennie Moran</h3>
<p>Manager</p>
<p>*</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<div class="images"><img src="images/joomlart/about_page/staff-3.jpg" alt="Sample image" />
<div class="images-info"><strong>Nicholas Mitchell</strong>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of 'de Finibus Bonorum et Malorum' (The Extremes of Good and Evil) by Cicero, written in 45 BC.</div>
</div>
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Community manager.</p>
<p>*</p>
</div>
</div>
</div>
</div>
<h1 class="text-center">Our team</h1>
<div class="section row">
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-4.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Nicholas Mitchell</h4>
<p>Designer.</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-5.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Sean Thomas</h4>
<p>Tester</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-6.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Bennie Moran</h4>
<p>Designer</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-7.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Nicholas Mitchell</h4>
<p>Tester</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-8.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Nicholas Mitchell</h4>
<p>Developer</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-9.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Sean Thomas</h4>
<p>Senior Designer</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a><img src="images/joomlart/about_page/staff-10.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Bennie Moran</h4>
<p>Developer</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-11.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>Nicholas Mitchell</h4>
<p>Developer</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="thumbnail"><a href="#"><img src="images/joomlart/about_page/staff-add.jpg" alt="Sample image" /></a>
<div class="caption">
<h4>You</h4>
<p>We are hiring!</p>
</div>
</div>
</div>
</div>
</div>


and you can add link into <a href=”#”>…</a> tags or you can change it with other module as JA ContentPopup module for example here and userguide here

[Author]

Posts