WebSite X5Help Center

 
Mandar V.
Mandar V.
User

Images should reshuffle after every refresh of page. Please help.  en

Author: Mandar V.
Visited 891, Followers 1, Shared 0  

Please help me (actually you do whenever I ask for)

Client want an image gallery on a front page of a website. And his requirement is; image position should be reshuffle after every refresh of the page. 

Please suggest me how to do it. 

I am using WX5 Pro, latest version. Is it possible to do it in a Gallery or a Jstified Gallery?

Thank you in advance.

Regards from India

Mandar

Posted on the
16 ANSWERS - 6 USEFUL
Giancarlo B.
Giancarlo B.
User

I don't know of any gallery objects that show images randomly

Read more
Posted on the from Giancarlo B.
Axel  
Axel  
User

probably with Jquery custom code...

Hello KolAsim ???!! smile any idea ?

Read more
Posted on the from Axel  
Mandar V.
Mandar V.
User
Author

Thanks Giancarlo B.

Thanks Axel 

Shall wait for a reply (with a proper solution) from KolAsim.

Regards

Read more
Posted on the from Mandar V.
Daniel W.
Daniel W.
User
Best User of the month EN

In this post I describe how to create a gallery with random order of images using PHP code in the HTML object.

>> https://helpcenter.websitex5.com/en/post/263812 (German, translate with Google)

Alternatively, KolAsim's code could be used, but then the objects "Masonry" or "Justified Gallery" would have to be used and a link to the page with these objects would have to be posted.

Object "Masonry" (20 Credits) or "Justified Gallery" (20 Credits) in the marketplace, see

>> https://market.websitex5.com/de/objekte/gallery_and_slideshow (Page 1 and 2)

Read more
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Mandar V.
... ... ...  Shall wait for a reply (with a proper solution) from KolAsim. ... ... ... 

(It > En)  ... Daniel's suggestion is very good...
... unfortunately I don't have the program at the moment, and in order to evaluate I can do it if you post the LINK of an example of a gallery published online...
... depending on the type and the cases it is not always possible to shuffle the images of the program's galleries...
... but if you post the LINK I can make an evaluation...
... a while ago I created a code to shuffle the portfolio object cards...

.

ciao

Read more
Posted on the from  ‪ KolAsim ‪ ‪
John S.
John S.
User

You could use 3. part software for that.

I use the free LuxAlbum. It can be set up with various parameters.

Example here: https://bramminginfo.dk/hollenderskoven.html

It is set up in an iframe as an un-interruptable slideshow. It starts with a random image each time it is started/re-started.

Images can have text (image caption) and also long texts and if geo-tagged, a button for GoogleMap is shown in manual slideshow.

If you take a look at this album: https://bramminginfo.dk/udstillingsalbum/index.php

Then you will see that the sub-album "Den Smukke Stationsby" has images that has text(I), and that some of the images is geo-tagged (M).

It is possible to "jump" directly to an album-folder like: https://bramminginfo.dk/udstillingsalbum/?a=album_20151118/mont2000/tidslinie

But then the breadcrumb navigation sets the "home" to that folder.

In the last example the images has image-caption, most of them have (I)nfo texts and some hre geo-tagged.

The text for the album and the text (not the caption) for the images can have html elements in the text, which make it possible to have links, images and objects in the text.

This: https://bramminginfo.dk/udstillingsalbum/?a=album_20151118/mont2000/tidslinie&s=1-4-999-0

starts a manual slideshow with random image as first image.

This: https://bramminginfo.dk/udstillingsalbum/?a=album_20151118/mont2000/tidslinie&s=1-4-4-0

starts a manual slideshow with image 4 as first image.

This: https://bramminginfo.dk/udstillingsalbum/?a=album_20151118/mont2000/tidslinie&s=2-4-4-0

Starts an un-interruptable slideshow with image 4 as first image.

Read more
Posted on the from John S.
Axel  
Axel  
User
Daniel W.
>> https://helpcenter.websitex5.com/en/post/263812 (German, translate with Google)

Hello Daniel,

On your link the showbow code is not documented. I tried by inspecting your URL demo to add the showbox like into your example, but I get a 500 error.

Please what is your exact PHP code to do that by configuring the onclick event viewed into the source ?

onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: 'afs-demo/random-gallery/'.$image, width: 640, height: 360, description: 'Description Test 10'}]}, 0, this);"

I tried this one, with no success... foot-in-mouth

Thanks a lot

Axel

Read more
Posted on the from Axel  
Daniel W.
Daniel W.
User
Best User of the month EN

@Axel:

I copied the ShowBox code from source and added the PHP variables.

The settings allow the normal user to set the maximum size of the ShowBox window.

The directory of images is given above along with the other image data so that users do not have to make any changes in the code below and can also use images from different directories.

-----

echo "\t" . '<a href="' . $pieces[0] . '"><img src="' . $pieces[0] . '" alt="'. $pieces[2] .'" title="'. $pieces[3] . '" style="width: 23%; margin: 5px" onclick ="return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'' . $pieces[0] . '\', width: 1920, height: 1080, description: \''. $pieces[1] .'\'}]}, 0, this);" /></a>';
}

-----

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month EN

The random image display is included in the "Gallery" object in the first 3 gallery types, but unfortunately not in the remaining gallery types.

.

----- Screenshot from German version -----

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month EN

I modified my PHP code slightly so that you only need to enter the path to the images once.

I marked the user input in bold in the PHP code.

Test page >> https://findelinks.de/123shop-hosteurope/galeriesortierung-per-zufall.php

.

----- PHP code ----

<?php
$images = array
(
'image-123.jpg//Description 1//Alt tag 1//Title 1',
'image-234.jpg//Description 2//Alt tag 2//Title 2',
'image-345.jpg//Description 3//Alt tag 3//Title 3',
'image-456.jpg//Description 4//Alt tag 4//Title 4',
);
$path = './path-to-images/';

shuffle($images); // the magic

echo '<div class="image-entry">';

foreach ($images as $image)
{
$image = $path . $image;
$pieces = explode("//", $image);

echo "\t" . '<a href="' . $pieces[0] . '"><img src="' . $pieces[0] . '" alt="'. $pieces[2] .'" title="'. $pieces[3] . '" style="width: 23%; margin: 5px" onclick ="return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'' . $pieces[0] . '\', width: 1920, height: 1080, description: \''. $pieces[1] .'\'}]}, 0, this);" /></a>';
}

echo '</div>';
?>

Read more
Posted on the from Daniel W.
Mandar V.
Mandar V.
User
Author

Thank you to everybody who helped me to overcome an obstacle. 

I'll try it and will surely post the link here for your expert review. 

Thank you once again. 

Regards

Mandar

Read more
Posted on the from Mandar V.
Axel  
Axel  
User

@Daniel

I'll try and go back here kiss

Read more
Posted on the from Axel  
Axel  
Axel  
User

Hello Daniel,

Great example !!! 

One question How can you have the showbox background in white ?

Into the echo line for the showbox, I tried background-color:red or color:red but 

Mine is black 

And the description is not really readable .

Thanks

Axel

Read more
Posted on the from Axel  
Axel  
Axel  
User

OK Daniel,

I have the showbox configuration by CSS wink

Great !!

Axel

Read more
Posted on the from Axel  
Daniel W.
Daniel W.
User
Best User of the month EN

Setting the colors for the ShowBox:

2 Template > ShowBox

background
Color [ Red v]

Box of contents
Color [ White v]

.

----- Screenshot (German version) -----

Read more
Posted on the from Daniel W.
Axel  
Axel  
User

HA Yesssss... Obviously !!!! wink

Read more
Posted on the from Axel