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

Utilizing JsonQuery to retrieve organized JSON data within filter.js

I recently discovered the amazing filter.js script, which can be found at https://github.com/jiren/filter.js. It has been incredibly helpful in my projects. var FJS = FilterJS(products, '#products', { template: '#productfinder-template& ...

jqueryjsonjquery-filter

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

From jQuery function to an npm module

If you're looking to create a new jQuery plugin, why not follow along with the tutorial below? You can find the full guide at https://learn.jquery.com/plugins/basic-plugin-creation/ (function ( $ ) { $.fn.customPlugin = function() { this.css( ...

jquerynpm

I have developed a web page using asp.net that cannot be resized

Hey there! I'm interested in building a web page that cannot be resized or minimized. Is there a way to do this? Additionally, I've noticed some advertising pages that are fixed on the screen - how can I create something similar? ...

c#asp.nethtml

The functionality of z-index is unreliable when article elements are utilized

Essentially, my goal is to display the <article id="characters"> above the <article id="accordion">. However, despite my efforts, the characters article appears below the accordion article instead of on top or even behind it. Where did I go wr ...

htmlcssz-index

How can I modify the color of a hover button?

How can I change the color of a link on hover? The code I tried is not working properly. Below is the CSS snippet I have already added: a:hover {color: red;} ...

htmlcss

Learn how to send multiple checkbox values using jQuery and AJAX requests

When trying to extract the value from multiple checkboxes, I utilize this particular code snippet: <form class="myform" method="post" action=""> <input type="checkbox" class="checkbox" value="11" /><br> <input type="ch ...

javascriptphpjqueryajaxcheckbox

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

phphtml

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

javascriptjqueryhtmlselectdrop-down-menu

"Using AJAX in PHP will not generate any output when returning JSON

Hey everyone, I'm having trouble with my simple PHP test code. I can't seem to get the err value that I want. 2.php $error = "abc"; $er = json_encode($error); return $er; Here's my HTML: <html> <head> <script src="https:// ...

phphtmljson

transferring iterative information via ajax data flow

My form includes hidden input fields that are manually declared in the AJAX data without a loop. How can I efficiently loop through them in the AJAX data? Below is my form script: <form method="POST" name="myform"> <?php for($i=1;$i<=5;$i+ ...

javascriptphpjqueryajax

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

I am facing an issue with the gap between the navbar and carousel in my materialize design. I have implemented Vue components for each div and Laravel as the backend. Using Sass for CSS preprocessing, I attempted to adjust the margins for the body, navbar, ...

csslaravelvue.jssassmaterialize

Tips for rearranging a span following an image?

Looking for a solution to rearrange a span element after an image within automatically generated HTML. Sample HTML: <span>closed</span> <img alt="Click to reset" src="xxx" class=""> Currently, the span appears before the img in the cod ...

htmlcss

Is there a way to position the table to the right of the registration text boxes?

Is it possible to position the table using <div> elements? ...

htmlcssformshtml-tablealignment

Enhancing elements with fade-in effects upon hovering

Is there a way to incorporate a subtle fade in/fade out effect when hovering over items on this webpage: http://jsfiddle.net/7vKFN/ I'm curious about the best approach to achieve this using jQuery. var $container = $("#color-container"), ...

javascriptjqueryhtmlcss

Ways to reload an independent page in order to access PHP session variables:

Starting off, I want to mention that my approach may not be the most efficient. As a novice in JavaScript and PHP, I am aware that there are better and simpler ways to achieve what I'm attempting. The issue seems to be related to session variables an ...

javascriptphphtmlajax

What is preventing my counter from functioning when I click on the canvas?

I am attempting to increment the count every time a bouncing ball in the browser is clicked using this.setState({count: this.state.count + 1});. I thought my code was correct since I have done similar tasks before without using canvas, but it's not fu ...

javascripthtmlreactjsdebuggingcanvas

Validating Doctype with jQuery

If the doctype is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, perform a specific action. Otherwise, perform a different action. Any suggestions on how to achieve this? Thank you. ...

jquerydoctype

What is the method for retrieving embedded JavaScript content?

In an attempt to scrape a website using Cheerio, I am facing the challenge of accessing dynamic content that is not present in the HTML but within a JS object (even after trying options like window and document). Here's my code snippet: let axios = ...

javascripthtmlnode.jscheerio