Создать пузырь

Question

Я использовал jquery для создания всплывающих подсказок для моего сайта http://www.mobileapps.co/. Это веб-сайт для мобильных приложений, который управляется динамически. Для всех своих продуктов на домашней странице я использую следующий кодекс, но некоторые из моих продуктов не имеют всплывающих окон.

<ul>

<?php  foreach($fetchapps->arr as $result){ ?>
<script>
    $(document).ready(function(){
        $('.popup0<?=@$result['appid']?>').CreateBubblePopup({
                                    position : 'top',
                                    align    : 'left',
                                    innerHtml: '<?=@$result['embeddedcode']?><p style="float:left"><?=@substr($result['appdesc'],0,100)?><img src="images/rate-off.gif" /><img src="images/rate-off.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /></p>',
                                    innerHtmlStyle: {
                                                    color:'#FFFFFF', 
                                                    'text-align':'center'
                                                },
                                    themeName:  'all-black',
                                    themePath:  'images/jquerybubblepopup-theme'
                                });
    });

</script>

<li class="popup0<?=@$result['appid']?>">
  <div class="icon"><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=$result['embeddedcode']?></a></div><p><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=substr(@$result['apptitle'],0,15)?></a>

  <span><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=$result['category']?></a></span>

  <b><?php if($result['appprice']!='free'){ ?>$.<?php } ?><?=$result['appprice']?></b>

</p></li><?php } ?>

</ul>

Answer 1

Вы никогда не должны зацикливать javascript, это безумие. Добавьте класс в li как popup (без идентификатора). Затем зациклите

$('li.popup').each(function () {
  //define content for the popup
  $(this).CreateBubblePopup....
});

Чтобы получить контент для всплывающего окна, я предлагаю вам поместить его в скрытый раздел с информацией.

Например, у вас есть петля

<?php foreach ($fetchapps->arr as $result): ?>
  <li id="app-<?php echo $result['appid']; ?>" class="popup">
    <div class="icon">
      <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo $result['embeddedcode']; ?></a>
    </div>
    <p>
      <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo substr($result['apptitle'], 0, 15); ?></a>
      <span><a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo $result['category']; ?></a></span>
      <strong><?php if($result['appprice'] != 'free') echo $result['appprice']; ?></strong>
    </p>
  </li>
<?php endforeach; ?>

Это то, что у вас есть сейчас, и в этом li помещается скрытый (скрытый с помощью css) div, который содержит всплывающую информацию:

<div class="popup-content">    
  <?php echo $result['embeddedcode']; ?>
  <p style="float:left">
    <?php echo substr($result['appdesc'], 0, 100); ?>
    <img src="images/rate-off.gif" />
    <img src="images/rate-off.gif" />
    <img src="images/rate-on.gif" />
    <img src="images/rate-on.gif" />
    <img src="images/rate-on.gif" />
  </p>
</div>

А позже внизу тела (желательно во внешнем файле) поместите js:

$('li.popup').each(function () {
  var $this        = $(this),
      popupContent = $this.children('.popup-content').html();
  $(this).CreateBubblePopup({
    position : 'top',
    align    : 'left',
    innerHtml: popupContent,
    innerHtmlStyle: {
      color:'#FFFFFF', 
      'text-align':'center'
    },
    themeName:  'all-black',
    themePath:  'images/jquerybubblepopup-theme'
  });
});

Я надеюсь, что в этом есть смысл.