Elegant container featuring a sliding carousel display

I am encountering an issue with fancybox related to implementing a UI that displays images in fancybox with a carousel option for sliding through the items.

Here is the desired UI layout:

https://i.sstatic.net/0wGO3.png

Here is the code I have been working on:

  <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fancyapps/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1177707f7268737e6951223f243f26">[email protected]</a>/dist/jquery.fancybox.min.css'>


<div class="gallery-section">
  <div class="container-fluid" id="nospace">
    <div class="gallery-box">

      <div class="box vertical">
        <a href="assets/img/portfolio/1.jpg" data-fancybox="gallery1">
          <img src="assets/img/portfolio/1.jpg" class="img-fluid">
        </a>
      </div>

      (more similar code blocks...)

    </div>

  </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/@fancyapps/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89e99969b819a9780b8cbd6cdd6cf">[email protected]</a>/dist/jquery.fancybox.min.js'></script>

Seeking assistance with resolving this problem. Thank you. Feel free to ask any questions if needed.

htmljquerycssbootstrap-4fancybox

Answer №1

To enhance the visual appeal of your website, consider adding multiple elements within a carousel slide element. By utilizing CSS techniques like creating two columns, you can make your content more engaging and dynamic. See an example below showcasing the combination of Tailwind CSS and Carousel 4:

<div class="carousel__slide grid grid-cols-2 gap-4">
  <a href="https://lipsum.app/id/1/900x600" data-fancybox="gallery">
    <img src="https://lipsum.app/id/1/600x400" />
  </a>
  <a href="https://lipsum.app/id/2/900x600" data-fancybox="gallery">
    <img src="https://lipsum.app/id/2/600x400" />
  </a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Yii2, create a button with an onclick event that executes a JsExpression

I need to submit a form with an array of elements whose number is unknown. class DynamicForm extends Model { /** var string[] */ public elements[]; } In the view where the form submission takes place, I want to include a button that triggers a Ja ...

javascriptphphtmlyii2yii2-advanced-app

Create a design using CSS that features rounded borders on three sides and one side with a disconnected corner

Could you help me with designing a CSS design that is found in the following link? https://i.sstatic.net/DmiSr.png ...

csscss-transitions

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6. The process should also work in reve ...

javascripthtmlcssimage

Pause the audio using jQuery when the slide changes

I have a Drupal website with a slider that includes an audio player on each slide. I need the audio to stop whenever the slide changes. The slider plugin I'm using is owlCarousel. Here is my current code: $("#owl-demo").owlCarousel({ afterAction: ...

javascriptjqueryaudiodrupal

Discover the secret to accessing restaurant menus with Foursquare by utilizing file_get_contents on the designated menu URL

I am encountering an issue with retrieving all the menus for a specific venue ID using the Foursquare API. As a workaround, I have opted to fetch menu details by utilizing 'file_get_contents' from the following menu URL: Snippet of Code : $menu ...

phphtmlxpathdomdocument

Encountering a problem sending an array of objects to a controller via jQuery AJAX

I attempted to send an array of objects to a controller using jQuery Ajax, but I am getting a null result in ASP.NET 5.0. The data array that I'm sending is named regions. The constructor for the data is defined in the BoundingBoxModel class. Here i ...

javascriptjqueryasp.netjsonajax

Executing a parent window function from a child window using AngularJS

I'm working on a multi-page/window application where a dashboard page controls a list of children (windows). The dashboard should be able to call functions in the children and vice versa. However, I'm facing an issue where the child fails to invo ...

javascripthtmlangularjs

Flex bug in safari causing issues with inline form display

I have created a simple inline form using flexbox. However, I encountered an issue in Safari where the button loses its width. Here is a screenshot for reference: https://i.stack.imgur.com/3s5AR.jpg Interestingly, the form looks fine in all other browsers ...

htmlcsssafariflexbox

Pressing the "Enter" key will trigger a JavaScript function while the textbox is in focus

I am looking to enhance my search functionality on my website. <div class="TextField Large"> <input type="text" name="q" id="SearchBox" /> </div> <div style="height: 40px; text-align: right; position: absolute; top: 0px; right: 0p ...

javascriptjqueryhtml

Issues with PHP not reflecting changes to MySQL database

I'm struggling to find a solution to the issue I'm facing on various forums. The problem involves two pages, an HTML page and a PHP page. The HTML page simply populates a dropdown list from a database column. Below is a simplified version of the ...

javascriptphpjqueryhtmlmysql

Discovering the specific URL of a PHP file while transmitting an Ajax post request in a Wordpress environment

I'm currently working on a WordPress plugin and running into some issues with the ajax functionality. The main function of my plugin is to display a form, validate user input, and then save that data in a database. Here is the snippet of code for my ...

javascriptphpjqueryajaxwordpress

Using JS or jQuery to redirect to a URL after receiving a JSON object from an event listener

My main aim is to create a process where I can redirect to a different URL based on an interaction in a cross-domain iframe. The desired process looks like this: A user visits example.com/apps/ and completes a form inside a cross-domain iframe. After su ...

javascriptjqueryjsoneventsaddeventlistener

Generating image alt tags based on the page title in real-time using PHP

Is there a way to automatically generate image alt text using the current page title in PHP? I am working on a website called and there are too many images to manually fill in alt text for each one. Thank you, Ricky ...

phphtml

Is it possible to choose multiple items with the same ID using jQuery, but located within distinct ASCX controls on a single ASPX page?

I am working on an ASPX page that contains two instances of an ASCX control. Each instance includes an asp:TextBox with the ID "TextView." I need to be able to access the contents of both TextBox controls from within the ASPX page. However, when I try usin ...

jqueryasp.net

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

The searchbar is failing to load the requested information through AJAX

I'm encountering an issue that I just can't seem to pinpoint. The goal is for the page to initially load all data, and upon hitting search, only display the requested data without refreshing the page. (Ideally, I would like to be able to modify ...

phpjqueryajaxformssearch

What is the process for executing a GET/POST request and receiving a JSON response on a webpage?

I am working on a page that has a JSON result, with both get and post methods in the controller. There are two submit buttons - one that redirects to the Post method and another that goes to the JsonResult method (named AddTableData). How can I set this up ...

c#javascriptjqueryhtmlasp.net-mvc

Storing user browsing history and showcasing a randomly chosen page

Currently in the process of creating a website where various pages will be dedicated to showcasing videos. I envision an innovative feature where the site will continue to play random videos successively without repetition, ensuring that users have a uniq ...

phpjqueryajaxweb

Expand your view to avoid overflow

Take a look at this image When viewing with standard resolution (1386 x 788), everything looks fine. However, when attempting to zoom out in Internet Explorer, things get messy: Why does this happen and how can it be fixed? Here's the code causing t ...

htmlcss

What is the best way to send multiple values via ajax?

view error screenshot Upon clicking the button, a function is called which returns certain values. These values need to be retrieved and sent via AJAX using jQuery. Below is the function that is called upon clicking the button. Within this function, anot ...

jqueryajax