Animating Sliding Images with jQuery in a Sleek Sliding Page

Just completed a 5-page sliding site, each page featuring an image slider.

Utilizing an image slider within a page slider. However, when attempting to use the same image slider with different images for page slide 3, it's not functioning. Any assistance would be greatly appreciated.

Not well-versed in Jquery, so despite extensive research, no luck...


                            <div id="address">
                            <img src="images/address.png" width="300" height="119" alt="address">
                            </div>

                            <div id="shop">
                            <img src="images/shop.jpg" width="300" height="225" alt="Shop">
                            </div>

                            <div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

                             <div id="kitchen2">
                   <script type="text/javascript"> 
                  $(function(){
                var options = {
                firstImageIndex: 0,
                borderWeight: 0 },
                                                                            params = {
                            sources: [
                            {
                                    preview: 'images/previews/1.jpg',
                original: 'images/originals/1.jpg',}, 
                                    {
                                                                preview: 'images/previews/2.jpg',
                original: 'images/originals/2.jpg',}, 
                                    {
                                                                preview: 'images/previews/3.jpg',
                original: 'images/originals/3.jpg',}, 
                                    {
                                                                preview: 'images/previews/4.jpg',
                original: 'images/originals/4.jpg',}
                       ]
                };
                $( '.photocradle' ).photocradle( params, options );
                                 }); </script>
                            </div>

                            <div id="address">
                            <img src="images/address.png" width="300" height="119" alt="address">
                            </div>

                            <div id="shop">
                            <img src="images/shop.jpg" width="300" height="225" alt="Shop">
                            </div>

                            <div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

                             <div id="kitchen3">
                   <script type="text/javascript"> 
                  $(function(){
                var options = {
                firstImageIndex: 0,
                borderWeight: 0 },
                                                                            params = {
                            sources: [
                            {
                                    preview: 'images/previews/5.jpg',
                original: 'images/originals/5.jpg',}, 
                                    {
                                                                preview: 'images/previews/6.jpg',
                original: 'images/originals/6.jpg',}, 
                                    {
                                                                preview: 'images/previews/7.jpg',
                original: 'images/originals/7.jpg',}, 
                                    {
                                                                preview: 'images/previews/8.jpg',
                original: 'images/originals/8.jpg',}
                       ]
                };
                $( '.photocradle' ).photocradle( params, options );
                                 }); </script>
                            </div>

Used the following method, and on the first page slider, there is an issue with 2 images overlapping. Need 3 small images in 3-page slider with different sizes.

Link:

Link showing what is being attempted to achieve but not working:

If you notice, used

photocradle.$area = $( '' ) .appendTo( $( "#kitchen2") );

What options can be used to add 3 more image sliders with different sizes successfully.

Answer №1

One reason for this issue is having two divs with the same class name on the same webpage, causing confusion for the photocradle plugin when determining where to insert the code.

To resolve this problem, follow these steps:

<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

-

$( '#first' ).photocradle( params, options );

-

<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

-

$( '#second' ).photocradle( params, options );

Answer №2

Check out the following link to see the results of implementing the method mentioned earlier:

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

Ways to extract a value from an object with no properties using jQuery

In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

Is it possible for a mobile device to play .ogg videos?

Currently, I am setting up a server to stream videos using HTML. So far, I have tested playing both .mp4 and .ogg video formats on my computer successfully. However, when I attempted to play the same videos on a mobile device, only the .mp4 file showed u ...

Dynamically include a new prop to the final element within an array of React components

I have been searching everywhere for a solution to this problem, but I can't seem to find one as I am unable to edit the props object. Here's what we are currently doing. We have a menu with subsections and we achieve this by: const firstSectio ...

NextJS is like the master of ceremonies in the world of backend

As I was searching for the top JS backend frameworks, I came across NextJS which is considered to be one of the best. Initially, I thought NextJS was just a simplified version of CRA and still required Node.js as the backend. This brought me back to my c ...

Adding a Stripe pay button using Jquery append results in the return of an [object HTMLScriptElement

I'm currently working on dynamically adding the Stripe pay with card button through jQuery. I've decided to append it because I only want it to show up once a specific condition is met by the user, as well as due to the fact that the pricing can ...

The inability of Chrome and Firefox browsers to open Windows folders directly from a hyperlink is a common

My link is directing to a Windows folder using its directory path. Surprisingly, it works perfectly fine in Internet Explorer but fails to work in Chrome and Firefox. How can I resolve this issue? The structure of my link looks like this: <a href="&bs ...

I am using jQuery Ajax and PHP to receive data in JSON format

Hey there, I've been trying to retrieve a 2-dimensional array from PHP using Ajax and jQuery, but I'm having trouble getting a response. Here's the code I have: HTML code $.ajax({ type: "POST", url: "get_data.php", data: "", ...

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

The D3 force layout is currently displaying just a single connection

I've been experimenting with a graph that I found in this demo and now I want to modify it to display data from Spotify. I created a sample JSON file and adjusted the script accordingly for the new data format, everything seems to be working fine exc ...

Oops! The type '{}' is lacking the properties listed below

interface Human { firstName: string; lastName: string; } let human1: Human = {}; human1.firstName = "John" human1.lastName = "Doe" Upon declaring human1, an error pops up: Type '{}' is missing the following properties from type Human ...

Receive File - Error 500 from Server

Getting a 500 Internal Server Error after uploading a large zip file using jQuery and CodeIgniter is causing some confusion. The progress bar completes, but the error appears in the console log without a clear reason. The strange part is that it works fine ...

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

Guide to extracting the outcomes of a promise array and populating them into a new array using Protractor

I am facing a challenge with transferring data from an array of promises generated by the following code: element.all(by.repeater('unit in units')). It seems to be difficult for me to store this data into another array: element.all(by.repeater(& ...

Target the <select> element within a <tr> using jQuery selector and apply an empty css style

When looking at this HTML snippet, I am attempting to target the <select> element with id= "g+anything" inside the <tr id='g2'>. <table> <tr id='g1><td> <select id="gm"> <opt ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

Exporting State From Another ReactJS Module: A Step-by-Step Guide

A new project is underway with 3 students who are diving into the world of React for the first time. To make our work more efficient, I suggested dividing the code so that each student could work on a different aspect simultaneously. However, when I attemp ...

How to trigger a file download instead of opening it in a new tab when clicking on a txt or png file in AngularJS

After retrieving my file URL from the backend API, I am trying to enable downloading when the user clicks a button. Currently, the download function works smoothly for Excel files (`.xlsx`), but for text (`.txt`) files or images (`.jpeg`, `.png`), it only ...