Concealing photos only to reveal them in an elegant fancybox display

I am looking to create a hidden gallery that can be displayed in fancybox. The idea is for visitors to click on one image and then have the ability to view more "hidden" pictures within fancybox. I know this can be accomplished by showing links or images on my page, but I don't want it to be cluttered. My goal is to hide the images or links until they are clicked on. I attempted to hide the images using CSS, but this also hides them in fancybox. Any suggestions or help would be greatly appreciated. Apologies for the repetition, I just wanted to make sure my question was clear. Thank you.

javascriptcssfancyboxhideshow

Answer №1

In the world of fancybox, there exists a delightful setting known as "onComplete" that springs into action when the fancybox makes its grand entrance. On the flip side, we have "onClosed," another setting that triggers upon bid farewell to the fancybox.

Here's an example:

var fancySettings = {
    'onComplete':function(){
        $(imagesSelector).show();
    },
    'onClosed':function(){
        $(imagesSelector).hide();
    }
}

Answer №2

To set up your primary visible image, you can follow this structure:

<a class="fancybox" href="images/01.jpg"><img src="thumbs/01.jpg" alt="" /></a>

For the remaining links, include them within a hidden div:

<div class="hidden">
  <a class="fancybox" href="images/02.jpg"></a>
  <a class="fancybox" href="images/03.jpg"></a>
  <a class="fancybox" href="images/04.jpg"></a>
  ... etc.
</div>

Note that links inside the div with class hidden do not contain an <img> tag, ensuring only the initial image is loaded on the page.

You may also want to apply CSS like so:

.hidden {display: none;}

Lastly, utilize the fancybox initialization script below:

jQuery(document).ready(function ($) {
    $(".fancybox").attr("rel", "gallery").fancybox();
}); // ready

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

Vuetify's v-list-item no longer has spacing issues when using the v-slot:prepend feature

Currently, I am in the process of designing a side navigation using v-navigation-drawer. While most of my items utilize an icon, I also want to create some custom behaviors. Unfortunately, the title in v-slot:title does not align with the title in the v- ...

javascriptvue.jsvuetify.js

Having trouble resolving the FancyBox Jquery conflict and unable to find a solution

Attempting to implement FancyBox on a website. The demo is functional, proving its capability. Yet, encountering an error when trying to integrate it within the WordPress theme: Uncaught TypeError: $(...).fancybox is not a function The header file cont ...

javascriptphpjqueryajax

Is there a way to automatically refresh a webpage in HTML that encounters an error?

I am facing a strange issue. There is a php script that runs exclusively on our webserver, processing a large amount of data immediately after a new job is added to the database. The processing typically takes around 1-5 minutes. To monitor for unfinished ...

phpjavascripthtmlajaxrefresh

Dynamic count down using JavaScript or jQuery

I am looking for a way to create a countdown timer that I can adjust the time interval for in my database. Basically, I have a timestamp in my database table that might change, and I want to check it every 30 seconds and update my countdown accordingly. H ...

javascriptphpjquerylive

Enhancing UI design with Vue.js

I'm attempting to customize elements using data from a JSON file in Vue.js: <div v-for="(item, index) in json._items" class="help-inner-callout" v-html="item.text" style="top:item.top; left: item.left;">&l ...

javascriptvue.js

Vue mouseup and mousedown event not functioning as anticipated

I am experiencing an issue with my code where the button is supposed to be disabled on mousedown event and enabled back on mouseup event. However, for some reason, the button does not get enabled on mouseup event. Here's the snippet of my code: ne ...

javascriptvue.js

Choose a particular optgroup simultaneously using custom JavaScript

Check out this Fiddle for an example I am facing a situation where I have two different types of option groups with options. My challenge is to ensure validation between these two groups. How can I achieve this? Situation 1 If I select something from g ...

javascriptjquery

Incorporating a function from a separate .js file into an index.ejs view using app.js

graphs.js: contains a function that initiates an API call and retrieves an object containing an HTML link for embedding a graph. app.js: includes the following (graphs.js has been imported): var express = require("express"); var app = express(); var grap ...

javascriptnode.jsexpress

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

javascriptjqueryhtmlcsswordpress

Sharing data between a Javascript applet and a webpage: strategies for sending results from the applet back to

When it comes to calling a method in an applet from JavaScript, I am facing a challenge. Both the applet and the JavaScript code are running on the same webpage. I am aware of how to call applet methods from JavaScript and vice versa using techniques like ...

javajavascriptjsonappletjson-rpc

I find myself grappling with the styling issue in MUI select

<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...

cssreactjsmaterial-uistyled-components

Utilizing form data to upload images and send them back to the front end within a React js application

I am working on a project using NestJS and React JS to create an image uploader. In React, I have the following setup: const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img& ...

javascriptreactjsnestjs

Sending data to Layout for customizable routes (App Router) in Next.js version 13

Looking to pass props to the Layout component for dynamic routes in my project structure: /app -/(site) --/layout.tsx --/page.tsx --/[slug]/page.tsx --/[slug]/layout.tsx In the site layout: export default async function IndexRoute({ children }: { chil ...

javascriptnext.jsnext.js13nextjs-dynamic-routing

What is the best way to insert a space within a stationary element?

I'm facing an issue with two fixed elements positioned at the bottom of my webpage: #wrapper { position: fixed; background: gray; color: #fff; bottom: 0; left: 0; right: 0; border-radius: 12px 12px 0 0; width: 100%; } #bottom-eleme ...

htmlcss

Hide the scrollbar in MUI Grid, all while maintaining the ability to scroll seamlessly

I am attempting to achieve the same outcome as mentioned in this post, but within a MUI Grid container/item. However, I am facing an issue where I do not see a scrollbar and am unable to scroll. Could there be a problem with my implementation? Here is the ...

cssmaterial-uireact-tsx

Tips for showing data from an hour ago in Angular

Here is the code snippet provided: data = [ { 'name' : 'sample' 'date' : '2020-02-18 13:50:01' }, { 'name' : 'sample' 'date' : '2020-02- ...

javascriptangulartypescript

Tips for concealing navigation buttons during certain stages in react stepzilla

When working with React Stepzilla, I encountered an issue where I have five steps but need to hide the next button on the first step. Following different methods provided online such as: const steps = [ {name: 'Step 1', com ...

javascriptreactjsreact-stepzilla

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

Calculating the average value of an attribute in an array using Mongodb (Mongoose)

Seeking assistance with a query to find sellers near users based on location input and sorting them by average rating. Is this achievable? Snippet of the model including an array of reviews: const sellerSchema = new mongoose.Schema({ _id: Mongo ...

javascriptmongodbexpressmongoosemongodb-query

Oops! There seems to be a problem with inserting an image using

I am trying to insert multiple images with a loop when clicked. The images are named "0.jpg","1.jpg","2.jpg" etc. To achieve this, I am using an array with all the elements: {name: '1', result: 1, prefecture: "city", photo1: "0.jpg"}, and my l ...

javascriptjqueryloopsnan