fancybox3: caption same size of image

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
• Reactjs antd modal custom selection

  When user clicks OK, I want to navigate to different web link based upon the selection of the radio buttons in the antd modal but I'm unsure how to do that.

  handleOk is the function which gets invoked when OK is triggered.

  Please suggest a workaround

  

  Here is the codesandbox demo - link

  import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import "antd/dist/antd.css";
  import "./index.css";
  import { Modal, Button, Radio } from "antd";
  
  const App = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
  
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    function handleOk() {
      // how to know which radio button is selected?
      alert("s");
    }
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
  
    return (
      <>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Radio.Group defaultValue="a" buttonStyle="solid">
            <Radio value="a">Page1</Radio>
            <Radio value="b">Page2</Radio>
          </Radio.Group>
        </Modal>
      </>
    );
  };
  
  ReactDOM.render(<App />, document.getElementById("container"));
  
• Blurry background for only left, right and bottom of the div

  I am trying to update web design as I desired. I would like to make only the lime green part blurry. I have already used position absolute so I am stuck how to achieve it. I am thinking to use modal method but since it has search bar, it would be tedious for users to go back to search. Now, my idea is the div called resultsBackground to be a backgound. Please advise. Thank you!!

  Codesandbox
• Modal attribute data-modal-target not working when added with Javascript

  I have been trying to add dynamically the modal target attribute to a div using javascript, but both setAttribute() method or append() method won't work. Obviously when I write the attribute on the div the modal appears without any problem.

  These are my attempts:

  <script>
        var build='<div data-modal-target="#modal">MODAL_TEST_DIV<div>';
        $('#divTest').append(build);
  </script>
  
  <div id="divTest">TEST</div>
  

  or

  document.getElementById("divTest").setAttribute("data-modal-target", "#modal");
  

  It's weird because analysing the divs the attribute is successfully added, but no reaction. Thanks in advance, any help it's really appreciated.

  P.s. The code I'm using for the modal is the basic one created by Web Dev Simplified

  HTML:

      <div data-modal-target=#modal>OPEN MODAL</div>
  
      <div class="modal" id="modal">
        <div class="modal-header">
          <div class="title">Example Modal</div>
          <button data-close-button class="close-button">&times;</button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt  repellat sapiente!
        </div>
      </div>
      
      <div id="overlay"></div>
  

  Javascript:

  const openModalButtons = document.querySelectorAll('[data-modal-target]')
  const closeModalButtons = document.querySelectorAll('[data-close-button]')
  const overlay = document.getElementById('overlay')
  
    openModalButtons.forEach(button => {
      button.addEventListener('click', () => {
        const modal = document.querySelector(button.dataset.modalTarget)
        openModal(modal)
      })
    })
  
  overlay.addEventListener('click', () => {
    const modals = document.querySelectorAll('.modal.active')
    modals.forEach(modal => {
      closeModal(modal)
    })
  })
  
  closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
      const modal = button.closest('.modal')
      closeModal(modal)
    })
  })
  
  function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
  }
  
  function closeModal(modal) {
    if (modal == null) return
    modal.classList.remove('active')
    overlay.classList.remove('active')
  }
  
• 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.
• Magento 2 gallery set nav thumbs on fullscreen, on not fullscreen nav: dots

  I would like to set on product page in gallery on fullscreen mode nav: thumbs and on not fullscreen nav: dots on mobile resolution. My code that doesn' work in etc/view.xml:

          <var name="breakpoints">
              <var name="mobile">
                  <var name="conditions">
                      <var name="max-width">767px</var>
                  </var>
                  <var name="options">
                      <var name="options">
                          <var name="nav">dots</var>
                          <var name="fullscreen">
                              <var name="nav">thumbs</var>
                          </var>
                      </var>
                  </var>
              </var>
          </var>
  

  Now the result is: on fullscreen and not fullscreen there is navigation with dots. I know I should override luma and blank xml files that include:

     <var name="breakpoints">
          <var name="mobile">
              <var name="conditions">
                  <var name="max-width">767px</var>
              </var>
              <var name="options">
                  <var name="options">
                      <var name="nav">dots</var>
                  </var>
              </var>
          </var>
      </var>
  
• How to get both videos and images of the gallery

  I am using this code to get the contents of gallery but it only returns the images. How can I get both videos and images of the gallery ??

  Uri uri;
              int column_index_data,column_index_folder_name;
              String absolutePathOfImage;
              uri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
  
              String[] projection = new String[]{MediaStore.MediaColumns.DATA,
                      MediaStore.Images.Media.BUCKET_DISPLAY_NAME};
  
              String orderBy = MediaStore.Video.Media.DATE_TAKEN;
              cursor = context.getContentResolver().query(uri , projection,null,null,
                      orderBy+" DESC");
  
              column_index_data = cursor.getColumnIndexOrThrow(MediaStore.MediaColumns.DATA);
  
• Xamarin forms: How to implement image cropping after selecting a picture from gallery or camera

  I am using MediaPlugin for opening Camera and Gallery to select pictures. After selecting a picture, I need to crop it before setting it on the UI. I have tried AllowCropping = true in the camera, but it works only for windows and ios. For the camera in android and gallery on all platforms (android, ios, and windows) there is no crop option.

  I tried ImageCropper.Forms package to implement the image cropping feature.

  My Code:

  //Camera
  async void CameraClick()
  {
      try
      {
          await CrossMedia.Current.Initialize();
  
          if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
          {
              if (!Utility.IsWindowsDevice())
              {
                  await DisplayAlert("Alert", "No camera available.", "Ok");
              }
              else
              {
                  ShowAlert("No camera available.");
              }
              return;
          }
  
          _mediaFile = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
          {
              Directory = "Sample",
              Name = "test.jpg",
              AllowCropping = true,
              PhotoSize = PhotoSize.Medium
          });
  
          if (_mediaFile == null)
              return;
          profilephoto.Source = ImageSource.FromStream(() =>
          {
              isPicture = true;
              isAvatar = false;
              if (Device.OS == TargetPlatform.iOS)
              {
                  return _mediaFile.GetStreamWithImageRotatedForExternalStorage();
              }
              else
              {
                  return _mediaFile.GetStream();
              }
          });
  
          new ImageCropper()
          {
              PageTitle = "Test Title",
              AspectRatioX = 1,
              AspectRatioY = 1,
              CropShape = ImageCropper.CropShapeType.Rectangle,
              SelectSourceTitle = "Select source",
              TakePhotoTitle = "Take Photo",
              PhotoLibraryTitle = "Photo Library",
              Success = (imageFile) =>
              {
                  Device.BeginInvokeOnMainThread(() =>
                  {
                      profilephoto.Source = ImageSource.FromFile(imageFile);
                  });
              }
          }.Show(this);
      }
      catch (Exception ex)
      {
          System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
      }
  }
  
  //Gallery
  async void GalleryClick()
  {
      try
      {
          await CrossMedia.Current.Initialize();
  
          if (!CrossMedia.Current.IsPickPhotoSupported)
          {
              if (!Utility.IsWindowsDevice())
              {
                  await DisplayAlert("Alert", "No photos available.", "Ok");
              }
              else
              {
                  ShowAlert("No photos available.");
              }
              return;
          }
  
          _mediaFile = await CrossMedia.Current.PickPhotoAsync(new PickMediaOptions
          {
              PhotoSize = PhotoSize.Medium
          });
  
          if (_mediaFile == null)
              return;
          profilephoto.Source = ImageSource.FromStream(() =>
          {
              isPicture = true;
              isAvatar = false;
              return _mediaFile.GetStream();
          });
  
          new ImageCropper()
          {
              PageTitle = "Test Title",
              AspectRatioX = 1,
              AspectRatioY = 1,
              CropShape = ImageCropper.CropShapeType.Rectangle,
              SelectSourceTitle = "Select source",
              TakePhotoTitle = "Take Photo",
              PhotoLibraryTitle = "Photo Library",
              Success = (imageFile) =>
              {
                  Device.BeginInvokeOnMainThread(() =>
                  {
                      profilephoto.Source = ImageSource.FromFile(imageFile);
                  });
              }
          }.Show(this);
      }
      catch (Exception ex)
      {
          System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
      }
  }
  

  I have done everything as per the blog, But when I run getting the below exception.

  [0:] Exception:>System.MissingMethodException: Method not found: System.Threading.Tasks.Task`1<Plugin.Media.Abstractions.MediaFile> Plugin.Media.Abstractions.IMedia.TakePhotoAsync(Plugin.Media.Abstractions.StoreCameraMediaOptions) at System.Runtime.CompilerServices.AsyncVoidMethodBuilder.Start[TStateMachine] (TStateMachine& stateMachine) [0x0002c] in /Users/builder/jenkins/workspace/archive-mono/2020-02/android/release/mcs/class/referencesource/mscorlib/system/runtime/compilerservices/AsyncMethodBuilder.cs:84 at Stormlion.ImageCropper.ImageCropper.Show (Xamarin.Forms.Page page, System.String imageFile) [0x00033] in <548dc893a11b47fe908c9c3d7f4a39ba>:0 at ProjectName.Pages.ProfilePage.GalleryClick () [0x00227] in F:\My Projects\Xamarin\ProjectName\ProjectName\ProjectName\Pages\ProfilePage.xaml.cs:554

  [0:] Exception:>System.MissingMethodException: Method not found: System.Threading.Tasks.Task`1<Plugin.Media.Abstractions.MediaFile> Plugin.Media.Abstractions.IMedia.TakePhotoAsync(Plugin.Media.Abstractions.StoreCameraMediaOptions) at System.Runtime.CompilerServices.AsyncVoidMethodBuilder.Start[TStateMachine] (TStateMachine& stateMachine) [0x0002c] in /Users/builder/jenkins/workspace/archive-mono/2020-02/android/release/mcs/class/referencesource/mscorlib/system/runtime/compilerservices/AsyncMethodBuilder.cs:84 at Stormlion.ImageCropper.ImageCropper.Show (Xamarin.Forms.Page page, System.String imageFile) [0x00033] in <548dc893a11b47fe908c9c3d7f4a39ba>:0 at ProjectName.Pages.ProfilePage.CameraClick () [0x0025b] in F:\My Projects\Xamarin\ProjectName\ProjectName\ProjectName\Pages\ProfilePage.xaml.cs:515 01-20 12:21:23.149 D/Mono (11820): Requesting loading reference 1 (of 3) of System.Collections.dll

  Don't know what is the issue behind this. Is there any other simple package for implementing the image cropping feature?
• Xcode access to the caption field made available in IOS 14

  With the release of IOS 14, users are now able to add a caption to their pictures in the photos app. I have dumped the EXIF of a picture with a caption, but can't see any caption field there. Using Xode, is it possible to access this new field? Can it be updated?
• Lightbox 2 Caption (2nd line)

  My lightbox 2 gallery is working as it should. However, I would like to add a second line to the caption, below the line that is already there. I am a JavaScript novice so am struggling to work out how to do this. Any help would be much appreciated.
• Add captions to photos which are positioned with Isotope

  I'm having a very hard time trying to add captions to the photos in my gallery. I don't know how to make the caption sit on top of the images. It's the gallery here https://memsmosaics.com/gallery.html

  Right now I've put in 3 example captions which are meant to sit on top of the first 3 images: bat, bees & moth. As you can see each caption just goes below the previous like a normal block element.

  Here's the html for these 3 images and captions:

  <figure>
    <figcaption>bat</figcaption>
    <a href='../images_organised_large/art_for_sale/Bat. $450 .jpg' target=blank>
      <img src='../images_organised_small/art_for_sale/Bat. $450 .jpg' class='all forsale'>
    </a>
  </figure>
  
  <figure>
    <figcaption>bees</figcaption>
    <a href='../images_organised_large/art_for_sale/Cicardas 3. $1,500 .jpg' target=blank>
      <img src='../images_organised_small/art_for_sale/Cicardas 3. $1,500 .jpg' class='all forsale'>
    </a>
  </figure>
  
  <figure>
    <figcaption>moth</figcaption>
    <a href='../images_organised_large/art_for_sale/golden musical moth $1,200.jpg' target=blank>
      <img src='../images_organised_small/art_for_sale/golden musical moth $1,200.jpg' class='all forsale'>
    </a>
  </figure>
  

  I've tried floating the <figure> tags and giving them a width equal to the width of the images, but that doesn't solve it either. It may look like it does at first but as soon as you narrow the screen, the captions do not stay in plsce on top of the images. This CSS isn't in there now but it looked like this:

  figcaption {
      float: left;
      width: 300px;
  }
  

  I guess the solving this would require understanding better how Isotope works. Will be very grateful for any help!