The problem with the Image Gallery carousel not functioning properly in a right-to-left direction arises when attempting to modify

Question

The problem with the Image Gallery carousel not functioning properly in a right-to-left direction arises when attempting to modify

I have been developing an image gallery that functions perfectly in the English version of the website. Now, I am tasked with replicating the same functionality for another version of the website that requires right-to-left (RTL) direction. However, when I apply the CSS 'direction:rtl', it disrupts the thumbnail script and causes the next/prev navigation to malfunction.

I have attempted various changes, including minor adjustments to the gallery.js file, but none of them have resolved the issue.

I am unsure of how to ensure that the thumbnail carousel works properly with the direction set to 'rtl' for the Arabic version of the website, as Arabic is RTL unlike English which is LTR.

You can view the Fiddle Links here: http://jsfiddle.net/f4XDj/ Updated Link: http://jsfiddle.net/f4XDj/1/

For a sample of the actual gallery, you can check out this link: http://tympanus.net/Tutorials/ResponsiveImageGallery/

Below is a snippet of the HTML code related to the gallery:

        <div id="rg-gallery" class="rg-gallery">
            <div class="rg-thumbs">
                <!-- Elastislide Carousel Thumbnail Viewer -->
                <div class="es-carousel-wrapper">
                    <div class="es-nav">
                        <span class="es-nav-prev">Previous</span>
                        <span class="es-nav-next">Next</span>
                    </div>
                    <div class="es-carousel">
                        <ul>
                            <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
                            ...
                            // Additional li elements omitted for brevity
                            ...
                            <li><a href="#"><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></a></li>
                        </ul>
                    </div>
                </div>
                <!-- End Elastislide Carousel Thumbnail Viewer -->
            </div><!-- rg-thumbs -->
        </div><!-- rg-gallery -->

javascript jquery html css

Answer 1

Answer №1

I have implemented a new rule based on your example from tympanus and it is working successfully:

.rg-caption p {
    direction: rtl;
}

Furthermore, I have removed the following rule:

 .rg-caption{
        text-align: center;
    }

Therefore, if you wish to change the direction in the carousel, you need to modify the following code:

$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}

Answer 2

I have implemented a new rule based on your example from tympanus and it is working successfully:

.rg-caption p {
    direction: rtl;
}

Furthermore, I have removed the following rule:

 .rg-caption{
        text-align: center;
    }

Therefore, if you wish to change the direction in the carousel, you need to modify the following code:

$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}

The problem with the Image Gallery carousel not functioning properly in a right-to-left direction arises when attempting to modify

Answer №1

Similar questions

Learn how to prevent the rendering of a specific section of code using JavaScript/TypeScript, similar to the functionality of *ngIf in Angular

Having difficulty in dynamically loading an image from an API's URL in Angular

Title Bar: Excessive gap; inaccurate navigation to nearby link

Generate a JavaScript function on the fly

What is the best way to update a Google Ad Manager ad after a javascript event, such as an ajax postback, has been triggered on a website?

Utilizing Javascript to Connect with Java Web API

Obtaining the complete JSON array in string format

Creating a timer that counts down and executing a SQL query with PHP upon completion

The `overflow:auto` property is causing the flex container to overflow due to the size of its fixed width children

Tips for avoiding duplicates when searching with the simple HTML DOM parser

Personalized customizable elements in Draft.js (extension)

Tips for postponing a function's execution in order to ensure it has completely loaded

How do I overwrite this calculation using JQuery?

communicating data within a JavaScript file across server and client

Utilize external functions in evaluated code

A guide on how to retrieve POST form fields in Express

Issue with showing second page in form post using Express.js: node.js, express.js and jade

The default action is not triggered when the click event occurs

JavaScript's wildcard character, *, in a regular expression will always match something

When the result of Ajax is identical to that obtained without Ajax, the innerHTML remains the same