Popup kuvia sisältöalueelle

8/30/2011

Otetaampa taas pieni kikka. Eli kuinka tehdä sisältöalueelle popup kuvia (tai mitä tahansa sisältöä) ePages tyylillä.

<img id="opener" src="Kuvan/Osoite/Kuva_s.jpg" />
<script type="text/javascript">
jQuery(document).ready(function() {
  var $dialog = jQuery('<div></div>')
    .html('<img src="Kuvan/Osoite/Kuva.jpg" style="height: 300px;" />')
    .dialog({
      modal: true,
      closeOnClickOut: true,
      autoOpen: false,
      title: 'Demo kuva',
      width: "415",
      dialogClass: 'epDialog extraDialog'
    });
  jQuery('#opener').click(function() {
    $dialog.dialog('open');
    jQuery('div.extraDialog div.ui-dialog-titlebar').addClass('epDialogTitleBar');
    return false;
  });
});
</script>


Tämä tapa on tietysti hieman työläs, mutta se tekee siitä myös todella monipuolisen :)

Saattaisit pitää näistäkin

0 comments