Asked  7 Months ago    Answers:  5   Viewed   56 times

I use jquery fancybox 1.3.4 as pop form.

but I found fancybox can't bind to element dynamic added. for example when I add a html element to current document.

like this: first I append a element to body use jquery,

  $(document.body).append("<a href="home/index" class="fancybox"/>");

and I call fancybox,

  $(".ajaxFancyBox").fancybox({padding: 0});

but fancybox don't work with dynamic added element.

and I can't call fancybox from this element?



The easiest way to bind fancybox (v1.3.x) to dynamically added elements is:

1: Upgrade to jQuery v1.7.x (if you haven't yet)

2: Set your script using jQuery API on() + the focusin event.

To make it work you need to find the parent element of your elements with class="ajaxFancyBox" as per your code above (or the parent of the parent as you need it) and attach jQuery on() to it so for example, having this html:

<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>

.. we will apply on() and focusin event to the element with id="container" (the parent) as in the example above, like:

$("#container").on("focusin", function(){
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on

You can apply any fancybox option as you need. Additionally you may have different scripts for different type of content (inside the on() method) like:

$("#container").on("focusin", function(){
  // fancybox API options here
  'padding': 0
 }); // fancybox
  // fancybox API options here
  'padding': 0,
  'width': 640,
  'height': 320,
  'type': 'iframe'
 }); // fancybox
}); // on

IMPORTANT: the example above won't work like that on Chrome. The workaround is to add the tabindex attribute to all of your elements bound to fancybox like

<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>

that solves the issue and will work (as far as I know) in most browsers including IE7+.

See my demo page here

UPDATE: March 07, 2012.

I was told that this method only works when you add new content to the page but not when you replace the content of the page.

The method actually works on either of the two scenarios mentioned above. Just make sure that the new replacing content is also loaded inside the container where you applied the .on() method.

See demo

The tabindex workaround for Chrome also applies.

Tuesday, June 1, 2021
answered 7 Months ago

Try this one, it should work just fine:

$searchValue=$_GET["searchValue"]; //connect $conn = new mysqli($host, $user, $password, $database); if ($conn->connect_errno) { echo "Our apologies, having technical difficulties"; }

//assign tags, turn searchValue into a array by each word

$explode = explode(' ', $searchValue); $tags_cnt = count($explode);

$cnt_q = NULL; $s_cnt = NULL; for ($i=0; $i<$tags_cnt; $i++) {

$cnt_q = $cnt_q. '?'; if ($i<$tags_cnt - 1) $cnt_q = $cnt_q.',';

$s_cnt = $s_cnt. 's';


$tags[] = & $s_cnt;

for ($a=0; $a<$tags_cnt; $a++) { $tags[] = &$explode[$a]; }

//search by Tags

$query = " SELECT results.Title, results.tags FROM results INNER JOIN tags ON results.ID = tags.book_id WHERE tags.tag IN (".$cnt_q.") GROUP BY results.ID";

$stmt = $conn->prepare($query); call_user_func_array(array($stmt, 'bind_param'), $tags); $stmt->execute();

$results = $stmt->get_result(); while($row = $results->fetch_array(MYSQLI_ASSOC)) { echo "Title: "; echo $row["Title"]; echo "</br>"; echo "Tags: "; echo $row["tags"]; echo "</br></br> "; }



Saturday, May 29, 2021
answered 7 Months ago

I haven't had any responses, but after some thought I come to a solution using PHP. Basically I am using php to create a separate trigger for each occurrence of duplicate images. When the trigger links are created the trigger array is updated. After all the links have been added, the trigger array is processed and a separate trigger created for each. If someone else is having this issue, hopefully this will help.


$result_set=  get_collection_standards($sel_collection);
while ($standard = mysqli_fetch_array($result_set)) {
    $caption = htmlentities($result["caption"]);
    If (!array_key_exists($image_id,$image_id_array)){
        $image_id_array[$image_id]=$a;//image_id receives the key value and the value is the photo number in the gallery - 1. 
        $link="<a rel="feature_gallery" class="fancybox" href="{$path}-l.jpg"";
    } Else {  //if the image does exist create a trigger link.
        $link="<a data-trigger-rel="feature_gallery" class="fancybox-trigger". $image_id_array[$image_id] .
        "" href="{$path}-l.jpg" ";
        if (!array_key_exists($image_id,$trigger_array)) {   //update the trigger array to be used below. 
    $link .= " title="{$caption}"><img src="{$path}-s.jpg" ></a>";
    echo $link;

foreach ($trigger_array as $position) {
        echo "<script>";
        echo "  $("a.fancybox-trigger{$position}").click(function() {";
        echo "  $("a[rel='" + $(this).data('trigger-rel') + "']").eq(" . $position . ").trigger('click');";
        echo "  $$(this).attr('tirgger-rel'));";
        echo "  return false;";
        echo "});";
        echo "</script>";
Saturday, May 29, 2021
answered 7 Months ago
import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
                                .addEventListener('click', this.onClick.bind(this));

onClick(event) {
Wednesday, June 16, 2021
answered 6 Months ago

Just do :

var myContent = "..."; // html as option "B"

jQuery(document).ready(function ($) {
        // API options as "B"
        // build the iframe
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
}); // ready


Notice the myContent variable contains the full html structure, including DOCTYPE, <html>, <head> an <body> sections. Although it's not mandatory, it will give you more control over the settings of your initial (iframed) page.

Also notice in my jsfiddle I separated the base content (html basic structure) from the custom content (the <div> as in your example) for tidiness purposes ;)

Refs :

  • Option A :
  • Option B :
Sunday, August 29, 2021
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :