I have the following PHP code:
<?php
define ('ACCESS', 1);
require_once 'database.php';
$db = new Database();
$sql = 'SELECT Drn,Src,Tit,Sub FROM Img_Compositos_Cersize WHERE Drn > :id';
$parameters = array(':id' => 0);
$results = $db->getArray($sql, $parameters);
foreach ($results as $index => $result){
$html = '<div class="compositosType_brandContainer">
<div class="compositosType_brand">
<p><span class="compositosType_subtitlePrefix">'.$result['Tit'].'</span>
<br/>
<span class="compositosType_title">'.$result['Sub'].'</span>
</p>
<img class="compositos_image" src="'.$result['Src'].'" alt="" />
</div>
</div>';
echo $html;
}
... and I have this HTML:
<div class="compositos_DBitem_lightbox">
<p class="compositos_infoImage_title">Rock name</p>
<p class="compositos_infoImage_subtitle">Rock type</p>
<img class="compositos_infoImage"src="" alt="" />
</div>
When I click the .compositosType_brandContainer
(PHP), it pops-out the .compositos_DBitem_lightbox
(HTML). Right now the .compositos_DBitem_lightbox
is empty, but I want it to display the same common PHP strings, which are:
- '.$result['Tit'].' ---> .compositos_infoImage_title
- '.$result['Sub'].' ---> .compositos_infoImage_subtitle
- '.$result['Src'].' ---> .compositos_infoImage
The jQuery code that pops-out the .compositos_DBitem_lightbox
:
$(this).addClass('compositos_highlighted').animate({'width':'70%', 'height':'70%', 'top':'10%'}, 100, 'swing')
.find('p').animate({'font-size':'73%'}, 100, 'swing',
function(){
$this.animate({'width':'100%', 'height':'100%', 'top':'-4.5%'}, 100, 'swing')
.find('p').animate({'font-size':'110%'}, 100, 'swing',
function(){
$('.compositos_DBitem_lightbox').fadeIn(1000);
$('.compositos_lightboxBackground').fadeIn(1000);
$('.compositos_DBitem_lightbox').one('click', function(){
$(this).fadeOut(300);
$('.compositos_lightboxBackground').fadeOut(300);
});
}
);
}
);
I should also mention that the PHP dynamically creates a bunch of the .compositosType_brandContainer
divs.