Thumbnail vanishes upon being selected

To access my template site currently, please click here.

Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here.

Below is a snippet of the jQuery code I have for this particular thumbnail:

var galPhotos1 = [
            {href : 'images/portfolio/smilehealthy_werewolfmtd.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
            {href : 'images/portfolio/smilehealthy_applemtd.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
            {href : 'images/portfolio/smilehealthy_vampiremtd.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
        ];

        $('a#gallery1').live('click',function(){
            $.fancybox(galPhotos1);
        });

I am seeking suggestions on how to ensure that when the FancyBox gallery is closed, the thumbnail does not disappear. Any assistance on this matter would be greatly appreciated! =]

jqueryhtmlcssfancybox

Answer №1

If you find yourself in a situation where you have applied two different fancybox calls to the same element, it may be causing some unexpected behavior. Here is an example of what your HTML might look like:

<a id="gallery1" class="fancybox"> ...etc

The two scripts that are calling fancybox are:

$(".fancybox").fancybox(); // This call applies fancybox to all elements with the class "fancybox"

and

$('a#gallery1').live('click',function(){
 $.fancybox(galPhotos1); // This call applies fancybox when clicking on the element with the id "gallery1"
});

This could be causing a conflict leading to the strange behavior. To resolve this, simply remove the class="fancybox" attribute from your anchor tag and the issue should be resolved.

<a id="gallery1"> ...etc

Answer №2

Big thanks to @jfk for the assistance! =]

I decided to take the 'a' link element out of the function and modify the code as shown below:

$('#gallery1').on('click',function(){
    $.fancybox(galPhotos1); // call fancybox when clicking on an element with id "gallery1"
});

This adjustment seems to have resolved the issue. It's working perfectly now!

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

Disabling GPS with HTML5/phonegap: A step-by-step guide

Looking to create a function that can toggle GPS on and off for both iPhone and Android devices ...

javascriptandroidiphonehtmlcordova

Altering the flex-direction causes my divs to vanish into thin air

Just starting out with css, trying to get some practice. I'm attempting to position two divs on opposite sides of a parent div. Switching flex-direction from 'column' to 'row' causes the divs to disappear. #assignments-wrapp ...

cssflexbox

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...

htmlcsswordpress

How can I utilize jQuery to create a remove button that deletes individual div elements one at a time?

<div class= "button"> <button id="More" type="submit">Click here to add more Parameters</button> <button id="Remove" type="submit">Click here to Remove Parameters</button> </div> <script> var count = 2; ...

javascriptjqueryhtml

Provide two values and complete the third one

I have a form with three input fields. I want to fill out two of the fields and have the third field automatically filled in. Here is how it should work: - I fill out the first and second fields, and the third field calculates itself - I fill out ...

javascriptjqueryinput

Utilizing CSS files to incorporate loading icons in a component by dynamically updating based on passed props

Is it possible to store icons in CSS files and dynamically load them based on props passed into a component? In the provided example found at this CodeSandbox Link, SVG icons are loaded from the library named '@progress/kendo-svg-icons'. Instea ...

javascriptcssreactjstypescriptkendo-ui

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

javascriptjqueryonclick

The Best Way to Align a Large Image in the Middle of a Browser Window Using Inline HTML

Currently, I am attempting to center an image that is 1920px wide within the browser window. The challenge lies in not having it fit entirely within the window, so using width:100% will not achieve the desired effect. Furthermore, this needs to be accomp ...

htmlcssimageinline

Is there a way to cancel hiding on a q-dialog?

I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...

javascripthtmlvue.jsdialogquasar

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page

As Bootstrap 4 no longer supports .affix, I had to look for an alternative solution to keep a box fixed. I needed a div container to remain fixed as you scroll to it. My current workaround is using: .fixedcard{ position: sticky; top:75%; } However, th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it feasible to utilize the translate function twice on a single element?

Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encounter ...

javascripthtmlcsscss-transforms

"Excessive use of Javascript setInterval combined with frequent ajax calls is causing significant

I have integrated the setInterval() function into my JavaScript code to make an AJAX call every 2 minutes. However, I noticed that this is causing the website to slow down over time. The website is built using Node.js. After doing some research, I came acr ...

javascriptjqueryajaxnode.js

The tag that is mandatory is not functioning properly in the Bootstrap form

I am currently working on integrating a Bootstrap form into my Flask website, and I am facing an issue with making certain fields mandatory before submission. I have tried using the "required" attribute in the input tags, but for some reason, it is not wor ...

htmlflaskbootstrap-5

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss

Locate the HTML element and assign an ID to its parent

Current code is working correctly, but encountering an issue with changed image paths. $('td img[src="/images/nav/prev_dim.gif"]').parent().closest("table").attr('class','robsid'); The image path changes after '.gif&ap ...

jqueryparentclosest

Incorporating pre-designed elements into the bottom section of my

I'm currently facing an issue while trying to integrate a footer content from a template into my slideout footer. The problem is that the template footer is currently spanning across the entire width of the page, and I am struggling to contain it with ...

jqueryhtmlcsstwitter-bootstrapfooter

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

javascriptjqueryhtmlcss

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

The Ajax function is unable to accept JSON data as input

I am trying to figure out why I am unable to access data from a JSON object (json.projects[i].projName) when calling it from within an AJAX function. Below is the code that demonstrates this issue: var json = JSON.parse(data); for (var i = 0; i < json ...

javascriptjqueryjsonajax

Issue: AngularJS Injector Module Error

Recently started learning angularjs and trying to set up an app. Here's a simple and direct way to do it: Angular controller: (function () { 'use strict'; angular .module('myQuotesApp') .controller(' ...

javascriptc#htmlangularjs-directiveasp.net-core-mvc