Knowledge Base

Why is the JetEngine Popup Gallery Not Opening?

There can be several reasons why the JetEngine Popup gallery is not opening. The most common reasons are:

• Incorrect Trigger Settings: The event on which the popup is triggered may not be set correctly. For example, if it is connected to a button click event, make sure the button has the correct ID and the trigger settings are configured correctly.
• Conflicting JavaScript Codes: Other plugins or custom JavaScript codes used on your site may conflict with JetEngine's JavaScript. This can prevent the popup from working properly.
• Missing CSS Styles: The CSS styles required for the popup's appearance may be missing or invalid. This can cause the popup to be invisible or positioned incorrectly.
• Caching Issues: Caching mechanisms on the browser or server side may load an old version of the popup. This can lead to errors.
• JetEngine and Crocoblock Plugin Versions: Using outdated or incompatible versions of the plugins can cause problems.

To fix the problem, you can follow these steps:

1. Check Trigger Settings: In the JetEngine settings, make sure the popup is connected to the correct trigger event. Verify the button ID, CSS class, or other trigger parameters.
2. Resolve JavaScript Conflicts: Check the browser console for JavaScript errors. Error messages may indicate which plugin or code is causing the conflict. Try to resolve the issue by disabling conflicting plugins or editing custom JavaScript code.
3. Check CSS Styles: Use browser developer tools to inspect the popup's CSS styles. Check if the necessary styles are missing or invalid. Add missing styles or correct invalid styles.
4. Clear Cache: Clear the browser cache and the cache of server-side caching plugins. This ensures that the latest version of the popup is loaded.
5. Update Plugin Versions: Install the latest versions of JetEngine and other Crocoblock plugins. Make sure the plugins are compatible with each other.

Important Note: To ensure the popup works correctly, make sure your WordPress theme is compatible with JetEngine. Some themes may contain custom code that can interfere with JetEngine's functionality.

Why is the Popup Content Displaying Incorrectly?

Incorrect display of popup content is usually due to the following reasons:

• Incorrect Data Source: An incorrect data source may have been selected for the popup content. For example, a taxonomy term might be displayed instead of a custom field value.
• Incorrect Field Mapping: The fields in the data source may not be correctly mapped to the corresponding fields in the popup. This can cause data to be displayed in the wrong places.
• Missing or Incorrect HTML Structure: The HTML structure used for the popup content may be missing or incorrect. This can prevent the content from being displayed properly.
• CSS Styling Issues: The CSS styles of the popup content may cause the content to be incorrectly sized, positioned, or appear incorrectly.
• Dynamic Content Issues: Dynamic content (e.g., loops or conditional statements) may not be configured correctly.

To troubleshoot the issue, you can follow these steps:

1. Check the Data Source: In the JetEngine settings, make sure that the correct data source is selected for the popup content. Verify that the data source contains the correct data.
2. Check Field Mapping: Make sure that the fields in the data source are correctly mapped to the corresponding fields in the popup. Make sure that the field names are correct and that the data types are compatible.
3. Check the HTML Structure: Make sure that the HTML structure used for the popup content is complete and correct. Make sure that the necessary tags and attributes are present.
4. Check CSS Styles: Review the CSS styles of the popup content. Make sure that the content is correctly sized, positioned, and appears correctly. Edit the styles if necessary.
5. Check Dynamic Content: Make sure that the dynamic content is configured correctly. Make sure that the loops and conditional statements are working correctly.

Important Note: To ensure that the popup content is displayed correctly, make sure that the data source is configured correctly and that the content is mapped correctly. Also, make sure that the HTML structure and CSS styles are correct.

Why is the Popup Gallery Performance Slow?

The slow performance of the popup gallery can be caused by various factors. These include large image sizes, unoptimized JavaScript code, too many images, and server performance.

• Large Image Sizes: If the images used in the gallery are too large, the popup may take a long time to load and display.
• Unoptimized JavaScript Codes: If JetEngine's JavaScript codes are not optimized, the popup's performance may be negatively affected.
• Too Many Images: If there are too many images in the gallery, the popup may take a long time to load and display.
• Server Performance: If your server's performance is low, the popup may take a long time to load and display.

You can follow the steps below to improve performance:

1. Optimize Images: Optimize the images used in the gallery. Reduce image sizes and optimize image formats (e.g., JPEG or WebP).
2. Optimize JavaScript Codes: Optimize JetEngine's JavaScript codes. Remove unnecessary code and compress the code.
3. Reduce the Number of Images: Reduce the number of images in the gallery. Remove unnecessary images or divide the images into different pages.
4. Improve Server Performance: Improve your server's performance. Switch to a faster server or increase your server's resources.
5. Use Caching: Use caching on the browser and server side. This will allow the popup to load faster.
6. Use Lazy Loading: Load images with "lazy loading". This ensures that only images in the viewport are loaded and shortens the page loading time.

Important Note: To improve the performance of the popup gallery, it is important to optimize images, optimize JavaScript codes, reduce the number of images, and improve server performance.

Making JetEngine Popup Mobile-Friendly

You may need to make some adjustments for JetEngine popups to display and work properly on mobile devices. Mobile compatibility is critical for user experience.

• Responsive Design: Ensure that the popup content has a responsive design. The content should adapt to different screen sizes and resolutions.
• Meta Tags: Add the necessary meta tags to the head of the HTML document (<head>). In particular, the viewport meta tag ensures correct scaling on mobile devices.
• CSS Media Queries: Use CSS media queries to adjust the popup's style based on different screen sizes.
• Touch Interaction: Make sure that the elements in the popup are easily clickable on touch devices. Ensure that buttons and links are large enough and spaced adequately.
• Testing: Test the popup on different mobile devices and browsers. This will help you identify and fix potential issues.

You can make the popup mobile-friendly by following these steps:

1. Add the Viewport Meta Tag: Add the following meta tag to the <head> section of the HTML document:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Use CSS Media Queries: Use media queries in your CSS file to adjust the popup's style based on different screen sizes. For example:

   @media (max-width: 768px) {
       .jet-popup {
         width: 90%;
         margin: 0 auto;
       }
     }

3. Use Responsive Images: Use the srcset attribute of the <img> tag to provide different image sizes for different screen sizes.

   <img src="image-small.jpg"
          srcset="image-small.jpg 480w,
                  image-medium.jpg 800w,
                  image-large.jpg 1200w"
          alt="Description">

Important Note: Mobile compatibility is critical for user experience. Make sure your popup displays and works correctly on different mobile devices and browsers.

JetEngine Popup Triggering Issues and Solutions

Problems with triggering JetEngine popups usually stem from incorrect trigger settings or JavaScript conflicts. If the popup does not trigger on the correct event or does not trigger at all, it can negatively affect the user experience.

The following table summarizes common triggering issues and possible solutions:

Real-Life Example: On an e-commerce site, a popup was supposed to open when the "Add to Cart" button was clicked on the product details page. However, the popup sometimes didn't trigger at all, and sometimes it triggered multiple times. It was determined that the problem was caused by multiple popups being connected to the same button. The problem was solved after the second popup connection was removed.

Important Note: To troubleshoot popup triggering issues, it is important to check the trigger settings, resolve JavaScript conflicts, and ensure that the CSS styles are correct.

Using Conditional Logic in JetEngine Popup

By using conditional logic in JetEngine popups, you can ensure that the popup is displayed only under certain conditions. This allows you to personalize the user experience and provide more relevant content.

To use conditional logic, you can use JetEngine's conditional visibility features or custom JavaScript code.

JetEngine Conditional Visibility Features: JetEngine has conditional visibility features that allow you to control the visibility of popups and other elements based on certain conditions. Using these features, you can ensure that the popup is displayed only to users with a specific user role, on a specific date or time, or on a specific page or post.

Custom JavaScript Code: For more complex conditions, you can use custom JavaScript code. The JavaScript code can control the visibility of the popup based on the value of a specific variable, a cookie value, or another condition.

The following table provides some examples of using conditional logic:

Important Note: By using conditional logic, you can personalize the user experience and provide more relevant content. By using JetEngine's conditional visibility features or custom JavaScript code, you can ensure that the popup is displayed only under certain conditions.