How to set caption position inside the image in fancybox?

See also questions close to this topic

• Add products to the cart jQuery/Ajax/Symfony/Twig

  I am using session array as a cart in my store. So everytime I add new product to the cart I also update my total value of the cart that looks like:<a class="navbar-brand px-3" href="{{path('checkout')}}" id="cart">Cart{{total}}€</a>

  The problem is that the pages is reloaded every time i add a new product, because of return $this->redirectToRoute('eshop'); in my add_product function.

  I want to add products and update the total value, without reloading the whole page. How can I implement jQuery and AJAX in this situation? And what changes should be done in add_product function?

  I tried this but the product is not declared variable.

  <script>
    $(document).ready(function() {
       $('#btnAddProduct').click(function() {
          var pos = $('{{product.id}}').val();
         
         
          $.ajax({
             url: "{{path('add_product', {'id' : 'id'}) }}",
             type: "POST",
             data: },
             success: function() {
              
             }
          });
       });
    });
  

  My products looks like this.

  {% for product in products %}    
  
                <div class="col-lg-2">
                   <div class="card mb-3">
                      <img src="{{asset(product.image)}}" class="img-fluid" alt="{{product.name}}">
                      <h5 class="text-center" >{{product.name}}</h5>
                      <p class="text-center" >€{{product.price}}</p>
                      <form action="{{path('add_product', {'id' : product.id}) }}" method="post">
                         <button id="btnAddProduct" class="btn btn-primary btn-block" type="submit" >Add product</button>
                      </form>
                   </div>
                </div>
               
  {% endfor %}
  

  And also my add_product method in Symfony:

   /**
   * @Route("/eshop/add_product/{id}", name="add_product")
   */
  public function add_product($id,Request $request){
      
      $product = $this->eshop_model->get_product($id);
      $total= $this->session->get('total');
  
      $basket = $this->session->get('basket');
      $check = 0;
      foreach($basket as $k => $v){
              if($v['id'] == $product['id']){
                  $basket[$k]['quantity']++;
                  $basket[$k]['subtotal'] += $product['price'];
                  $check = 1;
                  break;          
              }    
      }
          
          if($check == 0){
              $a = array('id' => $product['id'], 'quantity' => 1, 'subtotal' => $product['price'], 'price' => $product['price'], 'name' => $product['name']);
              array_push($basket,$a);
          }
                   
          $total= $total+ $product['price'];
          $this->session->set('total',$total);
          
          $this->session->set('basket',$basket);
  
      return $this->redirectToRoute('eshop');
  }
  
• How to check if jQuery, $ is called with a specific selector in Jasmine?

  My Code:

  $('#test1').val('string1');
  

  I'm able to test if val has been called with 'string1'.

  spyOn($.fn, 'val');
  
  expect($.fn.val).toHaveBeenCalledWith('string1');
  

  But I want to test if $ has been called with a specific selector. I want to be able to do this.

  expect($.fn).toHaveBeenCalledWith('#test1');
  
• refresh dataTable passing new values to the url

  I have a reporting page where I have a dataTable that is fetching data from the database. It has a button to refresh the data so that if some data have been added or edited it will refresh the view (and everything works fine).

  The code so far is:

  $('#estrai').click(function(e){
      e.preventDefault();
      var dataDa = $('#data_da').val();
      var dataA = $('#data_a').val();
      var banca = $('#banca').val();
      $('#report').DataTable({
          destroy: true,
          "ajax": {
              "url": "endpoints/reporting.php?dataDa="+dataDa+"&dataA="+dataA+"&conto="+banca+"&anagrafica=banca",
              "dataSrc": ""
          },
          "language":{
              "sEmptyTable":     "Nessun dato presente nella tabella",
              "sInfo":           "Vista da _START_ a _END_ di _TOTAL_ elementi",
              "sInfoEmpty":      "Vista da 0 a 0 di 0 elementi",
              "sInfoFiltered":   "(filtrati da _MAX_ elementi totali)",
              "sInfoPostFix":    "",
              "sInfoThousands":  ".",
              "sLengthMenu":     "Visualizza _MENU_ elementi",
              "sLoadingRecords": "Caricamento...",
              "sProcessing":     "Elaborazione...",
              "sSearch":         "Cerca:",
              "sZeroRecords":    "La ricerca non ha portato alcun risultato.",
              "oPaginate": {
                  "sFirst":      "Inizio",
                  "sPrevious":   "Precedente",
                  "sNext":       "Successivo",
                  "sLast":       "Fine"
              },
              "oAria": {
                  "sSortAscending":  ": attiva per ordinare la colonna in ordine crescente",
                  "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
              }
          },
          dom: 'Bfrtip',
          buttons: [
              {extend: 'copy', text: '<i class=" fa fa-clipboard"></i> Copia', className: 'standard-button btn btn-small'}, 
              {extend: 'excelHtml5', text: '<i class=" fa fa-file-excel-o"></i>  Excel', className: 'standard-button btn btn-small'},
              {extend: 'pdfHtml5', text: '<i class=" fa fa-file-pdf-o"></i>  Pdf', className: 'standard-button btn btn-small'},
              {text: '<i class=" fa fa-refresh"></i> Aggiorna', action: function ( e, dt, node, config ) {dt.ajax.reload();}, className: 'standard-button btn btn-small'},
              {text: '<i class=" fa fa-bug"></i> Segnala un bug', action: function( e, dt, node, config ){location.href = "#";}, className: 'standard-button btn btn-small bug'},
              {text: '<i class=" fa fa-chevron-left"></i> Indietro', action: function( e, dt, node, config ){location.href = "/smartform/index.php";}, className: 'standard-button btn btn-small'}
          ],
          "columns": [
              { "data": "id"},
              { "data": "data"},
              { "data": "descrizione"},
              { "data": "banca"},
              { "data": "movimento"},
              { "data": "importo"},
              { "data": "periodico"},
          ],
          //"deferRend" : true,
          //"processing": true,
          //fixedHeader: true,
          //responsive: true
      });
  });
  

  This should redraw each time the dataTable and I'd like to know if there is a way to refresh the table by passing new dataDa, dataA and banca parameters (from the form) without having to redraw the table.

  I had a look at ajax.reload but it is not accepting new parameters, only performing again the same request
• fancybox 2.1.7 set manually the width after load it from 85% to 100%

  I'm using fancybox-2.1.7 (is it too old?) and I start with this parameters:

     $(".loadPage").fancybox({
              width       : '85%',
              height      : '100%',
              autoSize    : false,
              closeClick  : false,
              openEffect  : 'none',
              closeEffect : 'none',
              closeBtn  : true,
              padding: '0',
              margin: '0 '
  });
  

  I need to set width to 100% when the screen is less than 1000 pixel. I tried to change the width in this way:

  var lightboxOnResize = function lightboxOnResize() {
  if ($(window).width() < 1000) { $('.fancybox-inner').css('width', '100%');   }}
  

  and also in this way:

  $('.fancybox-inner','.fancybox-wrap', '.fancybox-desktop', '.fancybox-type-iframe', '.fancybox-opened').css('width', '100%');
  

  But I see the width always at 85%.

  This is the html output:

  <div class="fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened" tabindex="-1" style="width: 1617px; height: auto; position: absolute; top: 0px; left: 0px; opacity: 1; overflow: visible;"><div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;"><div class="fancybox-outer"><div class="fancybox-inner" style="overflow: auto; width: 1617px; height: 397px;"><iframe id="fancybox-frame1610990827889" name="fancybox-frame1610990827889" class="fancybox-iframe" vspace="0" hspace="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" scrolling="auto" src="my_link.html" frameborder="0"></iframe></div></div><a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a></div></div>
  

  I have changed via browser console both 1617px width to 100% and I reach what I want. But How can I do it via jquery command?
• fancybox :how to write this statement

  How to include our path of image

  <a href="image.jpg" data-fancybox="images" data-caption="My caption">
      <img src="thumbnail.jpg" alt="" />
  </a>
  

  I wrote code for image slideing while a click in iamge dynamicaly and i it giving me error

  Parse error: syntax error, unexpected '' '' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';' in D:\xampp\htdocs\PHP\gallery2.php on line 68

  echo '  <a href='/IMAGES/".$image."' </a> ';
  echo "<img src='IMAGES/".$image."'>  ";
  

  what change should done to have proper image slide
• Fancybox-3 empty space in the navbar

  When I open the picture in full screen, the right of the navbar, where the scroll was (it disappears when you open it to full), there is an empty space.

  

  Tried adding overflow: scroll doesn't help. Has anyone encountered this?

  There are a lot of code, tell me what I need to attach.
• Fancybox 3 - On click - When open scroll page to top (Prevent)

  I am using fancybox 3 version for one of my requirement with carousel slider component. Whenever user clicks fancybox modal link. It opens. But, on background it scrolls page to top. Tried some codes mentioned in stackoverflow. Still its not working. Not sure which one i missed out.

  Any please

  $('[data-fancybox]').fancybox({
        smallBtn : true,
        toolbar : false,
        iframe : {
            css : {
              width  : '800px',
              height : '600px'
            }
        },
        padding: 0,
        helpers: {
            overlay: {
            locked: false
          }
        }
      });

  <a class="modal-link" href="javascript:void(0);" data-src="#details-fancybox-modal" data-fancybox>
• fancybox v3 - prevent pre-loading of all images (only load when in focus)

  Using developer tools, I'm able to see that fancybox makes requests for all "full size" images in a gallery when that gallery is opened. This seems wasteful. If a user only swipes/clicks to see the first few, why load all full images at the end of the gallery that never come into focus?

  I tried disabling, preload by using

  image: {
      // Wait for images to load before displaying
      //   true  - wait for image to load and then display;
      //   false - display thumbnail and load the full-sized image over top,
      //           requires predefined image dimensions (`data-width` and `data-height` attributes)
      preload: false
  },
  

  but that doesn't seem to do what I want. All images still download to the client immediately when the gallery is opened.

  Is there a way to have images wait until they come into focus before they are downloaded? With connections as fast as they are these days, I'm not worried about the slight delay the user might experience (there is no need to preload/precache things as far as i'm concerned)

  Thanks!