Image slideshow

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
2 weeks 5 days ago #343552

-- HikaShop version -- : 4.6.0
-- Joomla version -- : 4.1.5
-- PHP version -- : 8.0

Hi,
my client ask me if we can have another type of image slideshow when on a product details.

The problem is the arrow to switch to the others images. Actually, only a little arrow on bottom.
Is there a way to have arrows in the middle of the image slideshow ?



Regards


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
2 weeks 5 days ago #343559

Hello,

We see 2 solutions :
1. May be you can have a look on the Image Popups plugin in our Marketplace.
2. But, maybe the best solution, and especially if you want have arrows in the middle of the image , is to add some custom css command.
=> Learn, here how to add custom css commands.

Example of command that may be useful in your case :

.arrow_html_class {
    // To put your arrow highter : 
    position: relative;
    top: -100px;
}
.arrow_icon_html_class {
    // remove current icon :
   display: none;
}
.arrow_container_html_class {
   // To replace arrow icon
   background-image: url('https://example.com/icon.png');
}
Hope this will help you to achieve your needs.
Regards

Last edit: 2 weeks 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
2 weeks 4 days ago #343571

Hi,
Thank you, but it dos not work.
If i check with the console, i see for the arrow this code :

#sb-nav-previous
#sb-nav-next

So i can play with it. But if i put a -100px, the arrow disappear under the image. And z-index dos not work.
For the left arrow, i have to put a -100px in left, and depending of the screen size, the arrow move. I imagine it will be the same with the top position....

I checked the add-on in your shop, but no one have the arrow in middle...


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Last edit: 2 weeks 4 days ago by thefbi.

Please Log in or Create an account to join the conversation.

  • Posts: 2134
  • Thank you received: 740
  • Hikashop Business
2 weeks 4 days ago #343575

Hi thefbi,

If you want to keep using the ShadowBox popup, here below is a CSS solution which replaces the background images with FontAwesome icons and makes everything larger, so that users have it easier:

#sb-info, #sb-info-inner {
	height: 36px;
	line-height: 36px;
}
#sb-counter {
	font-size: 16px;
	font-weight: bold;
}
#sb-nav {
	height: 36px;
}
#sb-nav a {
	font-family: "Font Awesome 5 Free";
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-size: 24px;
	height: 36px;
	width: 36px;
	margin-left: 5px;
	line-height: 36px;
}
#sb-nav-close, #sb-nav-next, #sb-nav-play, #sb-nav-pause, #sb-nav-previous {
	background-image: none;
}
a#sb-nav-close {
	font-size: 29px;
	margin-left: 15px;
}
#sb-nav-close:before {
	content: "\f00d";
}
#sb-nav-next:before {
	content: "\f04e";
}
#sb-nav-play:before {
	content: "\f04b";
}
#sb-nav-pause:before {
	content: "\f04c";
}
#sb-nav-previous:before {
	content: "\f04a";
}
Adjust to your needs or taste, of course.
E.g., the font "Font Awesome 5 Free" comes with HikaShop by default, but depending on your specific setup you might need to use "FontAwesome" or similar instead.

Result of above code in my case:


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Attachments:
The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
1 week 5 days ago #343698

Thank you, but that dos not work.
And the goal is to have this arrows at the middle of the image.

Regards


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Last edit: 1 week 5 days ago by thefbi.

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
1 week 5 days ago #343704

Hello,

Please, in order to allow us to be more specific in our help can you provide an Url link where we can see your current display subject.
Regards

Last edit: 1 week 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
1 week 5 days ago #343713

Hello,
Here it is, but you have to login (site under construction) :

This message contains confidential information


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Last edit: 1 week 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
1 week 5 days ago #343717

Hello,

As a start to get what you need, you can try this and reproduce the principle for the other parts your structure for your arrows, pagination etc...

div#sb-container div#sb-info {
    z-index: 9999;
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
}
From this my previous idea you will be able to modify the arrows & cross icon :
example :
#sb-nav-next {
    background-image: url(next.png);
}

Hope this will allow us to achieve what you need.
Regards

Last edit: 1 week 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
1 week 4 days ago #343723

Thank you very much, it is now almost perfect.
I created 3 icons in svg to replace the existing ones and play with the size.

I also hid the image count. I enlarged the width of the info box and put the left image on the left instead of the countdown.
I put below the code I used, please tell me if it is right ?
I still have one point to fix, I need to rearrange the icons, because on mobile, they go out of the frame, but it should be easy.

On the other hand, is it possible to make the close icon go up like on the screenshot? If not, maybe I prefer to hide it.
The idea is to have the left and right icons, perfectly aligned on the image on each side.

div#sb-container div#sb-info {
    z-index: 9999;
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
}
#sb-info, #sb-info-inner {
  height: 30px !important;
}
#sb-nav a {
  display: block;
  float: right;
  height: 25px !important;
  width: 25px !important;
  margin-left: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
}
#sb-nav-next {
    background-image: url(https://tango-express.ch/images/icones/icone-fleche-droite.svg) !important;
}
#sb-nav-previous {
    background-image: url(https://tango-express.ch/images/icones/icone-fleche-gauche.svg) !important;
   float: left !important;
}
#sb-nav-close {
    background-image: url(https://tango-express.ch/images/icones/icone-croix.svg) !important;
}
#sb-nav {
  float: none !important;
  height: 16px;
  padding: 2px 0;
  width: 100% !important;
}
#sb-counter {
  display: none !important;
}


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
1 week 4 days ago #343725

Hello,

It's possible, by using like previous the position command, but this time with relative, example :

.targeted_html_class {
    position: relative;
    top : -100px 
}

This will move the arrow 100px up from its starting position.
Hope this will help you, but as the cross button isn't required to click...

Regards

Last edit: 1 week 4 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
1 day 15 hours ago #343888

Hello and thank you, but i cant achieve this.
Can you please take a look at my short video to understand my problem : www.screencast.com/t/tu1c1Yzt

Regards


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
1 day 9 hours ago #343891

Hello,

Indeed, understand, then we will keep the principle but proceed a little differently!
1. In red, we will increase the height of the container so that it completely frames the image AND reposition it correctly
2. In blue, we will reposition the next & previous button

To better understand my idea, see my screenshot :



Regards

Last edit: 1 day 14 hours ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
1 day 6 hours ago #343899

OK, thank you, i see.
But the problem with the 400px from top is the responsive layout.
Depending of the screen size, the arrow are not fixed in the middle...

And at each image switch, the arrows goes to top and come back. This is not really good. But i thing i will let like the last modification. It is pretty perfect, so i thing it will be ok.


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Last edit: 1 day 6 hours ago by thefbi.

Please Log in or Create an account to join the conversation.

  • Posts: 3765
  • Thank you received: 508
  • MODERATOR
19 hours 10 minutes ago #343915

Hello,

Just for your information, you have the "@media" command in order to create to have specific css for required screen size.
Leran more about the @media, here .

Regards

Last edit: 19 hours 10 minutes ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 69
  • Thank you received: 6
  • Hikamarket Multivendor Hikashop Business
14 hours 28 minutes ago #343922

Hi,
OK, thank you, i will take a look.


“Un problème sans solution est un problème mal posé." - Albert Einstein
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

Please Log in or Create an account to join the conversation.

Time to create page: 0.112 seconds
Powered by Kunena Forum