Fancybox deprecated
The Fancybox component is a jQuery plugin that allows you to create responsive, customizable lightbox-style modals for displaying images, videos, and other content. It provides a simple and elegant way to showcase media in an overlay, enhancing the user experience on your website. Based on Fancybox 2.1.7.
Deprecated
This component is deprecated and will be removed in future releases. Use Modals instead.
Example Usage
Open FancyBox
Rezepturenfinder durchsuchen
Sie können Name und Zusammensetzung aller Rezepturen des Rezepturenfinders durchsuchen.
| Bezeichnung | Zusammensetzung | ||
|---|---|---|---|
| Erythromycin 2% - Dexpanthenol 3% - Linola® Fett |
| ||
| Harnstoff 4% - Triamcinolonacetonid 0,1% - Linola® - Linola® Fett |
| ||
| Harnstoff 10% - Linola® Fett |
|
Show Code
html
<a href="#fancybox-example" id="rezepturenfinder-laden" class="c-btn -small -secondary">Open FancyBox</a>
<div id="fancybox-example" class="fancybox">
<div class="archive-search-wrap">
<h2 class="c-headline">Rezepturenfinder durchsuchen</h2>
<p>Sie können <strong>Name und Zusammensetzung</strong> aller Rezepturen des Rezepturenfinders durchsuchen.</p>
<div class="c-float-container -has-icon -redesign archive-searchfield-wrap -is-active">
<div class="c-float-container__icon" aria-hidden="true"><span class="far fa-search"></span> </div>
<label class="c-label -redesign" for="rezepturenfinder-durchsuchen">Rezeptur suchen ...</label>
<input type="text" id="rezepturenfinder-durchsuchen" data-context="rezepturenfinder" value="" class="c-input -redesign archive-search"></div>
<div class="result archive-result" data-context="rezepturenfinder">
<table class="archive-search-table archive-table rezepturenfinder-table c-table -condensed -redesign">
<thead>
<tr>
<th class="col-name">Bezeichnung</th>
<th>Zusammensetzung</th>
<th class="col-rating"></th>
<th class="col-menu"></th>
</tr>
</thead>
<tbody>
<tr id="rezepturenfinder-44" data-uid="44">
<td class="col-name">Erythromycin 2% - Dexpanthenol 3% - Linola® Fett</td>
<td class="col-zusammensetzung">
<ul>
<li>Erythromycin 2,0g</li>
<li>Polysorbat-20-Lösung 10% nach Bedarf</li>
<li>Dexpanthenol 3,0g</li>
<li>Linola® Fett zu100,0g</li>
</ul>
</td>
<td class="col-rating">
<div class="traffic-light rating-yellow">
<div class="light light-red"></div>
<div class="light light-yellow" title="Herstellung unter Beachtung der entsprechenden Kommentare im Rezepturenfinder des DAC/NRF ggf. möglich."></div>
<div class="light light-green"></div>
</div>
</td>
<td>
<div class="c-action-menu h-flex h-flex-row h-end">
<div class="c-action-menu__row m-y-reset -last">
<div class="c-action-menu__dropdown">
<button type="button" class="c-btn -icon-btn -small -redesign -link">
<i class="fa fa-ellipsis-v"></i>
</button>
<ul class="c-list -linklist">
<li class="c-list__item">
<a class="c-link rezepturenfinder-use" title="Verwenden">
<i class="far fa-check-circle"></i>
Verwenden
</a>
</li>
<li class="c-list__item">
<a
href="https://dacnrf.pharmazeutische-zeitung.de/index.php?id=rezepturenfinderdetail&uid=623"
class="c-link rezepturenfinder-hint"
target="_blank"
>
<i class="far fa-exclamation-circle"></i>
Wichtige Hinweise
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr id="rezepturenfinder-285" data-uid="285">
<td class="col-name">Harnstoff 4% - Triamcinolonacetonid 0,1% - Linola® - Linola® Fett</td>
<td class="col-zusammensetzung">
<ul>
<li>Triamcinolonacetonid 0,1g</li>
<li>Harnstoff 4,0g</li>
<li>Gereinigtes Wasser 4,0g</li>
<li>Propylenglycol 10,0g</li>
<li>Linola® 60,0g</li>
<li>Linola® Fett zu100,0g</li>
</ul>
</td>
<td class="col-rating">
<div class="traffic-light rating-yellow">
<div class="light light-red"></div>
<div
class="light light-yellow"
title="Herstellung unter Beachtung der entsprechenden Kommentare im Rezepturenfinder des DAC/NRF ggf. möglich."
>
</div>
<div class="light light-green"></div>
</div>
</td>
<td>
<div class="c-action-menu h-flex h-flex-row h-end">
<div class="c-action-menu__row m-y-reset -last">
<div class="c-action-menu__dropdown">
<button type="button" class="c-btn -icon-btn -small -redesign -link">
<i class="fa fa-ellipsis-v"></i>
</button>
<ul class="c-list -linklist">
<li class="c-list__item">
<a class="c-link rezepturenfinder-use" title="Verwenden">
<i class="far fa-check-circle"></i>
Verwenden
</a>
</li>
<li class="c-list__item">
<a
href="https://dacnrf.pharmazeutische-zeitung.de/index.php?id=rezepturenfinderdetail&uid=1244"
class="c-link rezepturenfinder-hint"
target="_blank"
>
<i class="far fa-exclamation-circle"></i>
Wichtige Hinweise
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr id="rezepturenfinder-559" data-uid="559">
<td class="col-name">
Harnstoff 10% - Linola® Fett
</td><td class="col-zusammensetzung">
<ul><li>Harnstoff 10,0g</li><li>Linola® Fett zu100,0g</li></ul>
</td>
<td class="col-rating">
<div class="traffic-light rating-green">
<div class="light light-red" />
<div class="light light-yellow" />
<div class="light light-green" title="Standardisierte bzw. geprüfte Rezepturformel." />
</div>
</td>
<td>
<div class="c-action-menu h-flex h-flex-row h-end">
<div class="c-action-menu__row m-y-reset -last">
<div class="c-action-menu__dropdown">
<button type="button" class="c-btn -icon-btn -small -redesign -link">
<i class="fa fa-ellipsis-v" />
</button><ul class="c-list -linklist">
<li class="c-list__item">
<a class="c-link rezepturenfinder-use" title="Verwenden">
<i class="far fa-check-circle" />
Verwenden
</a>
</li><li class="c-list__item">
<a
href="https://dacnrf.pharmazeutische-zeitung.de/index.php?id=rezepturenfinderdetail&uid=1674"
class="c-link rezepturenfinder-hint"
target="_blank"
>
<i class="far fa-exclamation-circle" />
Wichtige Hinweise
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>javascript
$.fancybox.open({
href: "#fancybox-example",
minHeight: 500,
minWidth: 800,
fitToView: false,
scrolling: 'yes',
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});