Issues with compatibility between camera slider and nivo lightbox in jQuery

Encountering a problem with using slider and nivo lightbox together in one PHP file. Here is the code snippet:

<script type="text/javascript" src="js/slider/jquerySlider.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/slider/camera.min.js"></script> 

<script>
    jQuery(function(){
        jQuery('#camera_wrap_1').camera({
            thumbnails: false,
            loader: 'bar',
            pagination: false,
            height: '300px',
        });
    });
</script>

<!--Nivo LightBox-->    
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/jquery.min.js"></script>
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>

<script>
    $(document).ready(function(){
        $('a').nivoLightbox();
    });
</script>

The issue currently is that only Nivo Lightbox is functional, while the slider does not work. Removing the line with src="js/nivoLightbox/jquery.min.js" enables the slider but disables the lightbox.

I suspect that jQuerySlider.min.js may be an alternative version of jquery.min.js. Both scripts seem to be different versions of the jQuery library. However, even after deleting or replacing them with the latest version, the functionality remains flawed.

If anyone could provide a revised version of this code for it to work seamlessly, it would be greatly appreciated.

Answer №1

Below is where you'll discover the solution.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/slider/camera.min.js"></script> 


<!--Nivo LightBox-->    
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />

<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>

<script>
    $(document).ready(function(){
        $('#camera_wrap_1').camera({
            thumbnails: false,
            loader: 'bar',
            pagination: false,
            height: '300px',
        });

        $('a').nivoLightbox();
    });
</script>

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

Display targeted information upon clicking a designated division using JavaScript or jQuery

I'm working on a FAQ page and I want to display a specific answer when a particular question is clicked. If you'd like to see it in action, here's a fiddle: http://jsfiddle.net/hdr6shy9/ Below is the code I'm using: HTML: <div cl ...

Create circular shapes using the border-radius property

I've been experimenting with converting some divs using border radius and I've almost got it, but sometimes they end up looking like 'eggs' haha. Here is the CSS code I'm using: #div{ /*central div*/ position:absolute; t ...

gmap displays a quarter of the information in a jQuery dialog box after one loading process

Incorporating a Google Map based on longitude and latitude data from a repeater control data source. Take a look at the code snippet below: <script src="http://maps.google.com/maps/api/js?key=myapikey&sensor=false" type="text/javascript">< ...

Tips for altering the webpage's URL using a button

I am currently attempting to implement next and previous buttons on my calendar to navigate between months. While it would be ideal to achieve this without refreshing the page, I am open to the possibility of a page refresh if necessary. In PHP, I have a ...

Creating a triangular shape at the bottom of a <td> element in an HTML email

I am trying to create a triangle shape similar to the one shown in the image. https://i.sstatic.net/wd4nZ.png <table> <tr> <td align="left" valign="top" style="padding-top: 10px; padding-left: 0px;"> < ...

What is the best approach for extracting value from an API endpoint?

The following data is provided in a json format. Can someone please guide me on how to retrieve the value or data using jquery ajax. {"detail": { "ID":001, "Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail= ...

How to display a tooltip using jQuery function

Looking for a way to add a class and title to an HTML element using JQuery? Check out this code snippet: emptyElements.addClass("EmptySelect").attr('title', 'This field is required'); JSFIDDLE While the tooltip currently shows on ele ...

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

Conceal the input field in a Vue.js datepicker

In my Vue project, I am utilizing the vuejs-datepicker component. My goal is to hide the default input field and display the Calendar only when the user clicks a button. To achieve this, I have placed the <datepicker/> within a div and applied CSS to ...

The Javascript file seems to be unable to recognize the reference to an Angular directive

When working on my project, I encountered an issue with my EventController.js not recognizing the reference to ng-app="eventsApp" from app.js. I followed a tutorial on Pluralsight. Even though it works for the instructor, I keep seeing {{event.name}} inst ...

Substitute placeholders in the HTML code with Angular syntax

Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...

How can you make divs adapt to screen resizing in a similar way to images?

In my REACT project, I am faced with the challenge of positioning three divs next to each other, with a small margin between them, and ensuring they are horizontally centered on the screen. As the screen width decreases, I need the right-most div to move ...

Enhance the current API functionality by incorporating personalized endpoints

Developing an API for multiple clients presents a unique challenge. While core endpoints like /users are common across all clients, some features may require individual customization. For instance, one client (e.g. "User A") may request a specialized endpo ...

Modify the CSS to update the navbar's active color

I'm currently using a simple CSS top navbar (without Bootstrap or any other framework) and I want to be able to change the active page's button color. For example, when I navigate to the home page, I want the button in the navbar to turn red or a ...

Transmitting a file using Ajax and submitting an input with jQuery

I have a form for uploading a file along with an input field. <form id="uploadForm"> <input type="text" id="name"> <input type="file" id="uploadFile"> </form> Here is the Aj ...

What is the best method for setting the height of an empty inline block element to match the line height of its container?

By default, inline-block elements adjust their height based on the container's line height only when they have content. However, I've noticed that empty or whitespace-only inline block elements default to a height of 0 (observed in Firefox). Is ...

What is the best way to add two different texts (each with a distinct font) and an image into a NatTable cell while also adjusting the margins?

Just a couple of queries: 1) Is it possible to incorporate two different text fonts and an image into a NatTable cell? 2) How can the margins be set up like in the example image below? In different scenarios: a) Through Java 1.6 (without RichTexCellEdi ...

How can a function be disrupted in NodeJS?

Not too long ago, I had a similar question, but I'm still struggling to find the solution. I need to validate the registration page before adding a new user. app.post('/signup', function(req, res) { //check if first name is filled i ...

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I am in need of creating an if statement that will trigger whenever images with IDs 0 to 3 (a total of 4 images) are loaded. This if statement should then generate a new row containing 0 to 3 images, and the same logic needs to be applied for words as well ...

Utilizing the super method within a sails.js controller

Is there a way to call the default parent method of a redefined standard method in a controller created in sails.js? module.exports = { create: function(req, res) { //test some parameters if (condition) { //call regul ...