Slideshow Management

I Have an Additional Feature Request - Slideshow Management

I Have an Additional Feature Request

by aknctn » Fri Apr 12, 2024 12:04 pm

First of all, I would like to thank you again for such a nice and useful plugin.

What I request from you is a two-column area on the side of the slides where the headings are arranged as items. When you hover over these topics with the mouse, the slide images will change and show the image of that topic. Is this possible? Or is it a difficult process to do?

In addition to all these, the thumbnail boxes on the side will continue to remain.

Google Tranlate
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm

Re: I Have an Additional Feature Request

by huynhbuutam » Sat Apr 13, 2024 2:16 pm

Sorry I can't figure out what you've described. Do you mean to replace thumbnails with titles, or both thumbnails and titles
User avatar
huynhbuutam
Registered User
Posts: 39
Joined: Wed Dec 01, 2021 4:15 pm
Location: Viet Nam
Name: Huynh Buu Tam

Re: I Have an Additional Feature Request

by aknctn » Sat Apr 13, 2024 3:07 pm

I don't have enough English to explain this. I tried to explain it with this floating visual.
Ekran görüntüsü 2024-04-13 180553.png
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm

Re: I Have an Additional Feature Request

by huynhbuutam » Sun Apr 14, 2024 2:27 pm

Got it, I'll post an instruction on this topic as soon as possible, best regards
User avatar
huynhbuutam
Registered User
Posts: 39
Joined: Wed Dec 01, 2021 4:15 pm
Location: Viet Nam
Name: Huynh Buu Tam

Re: I Have an Additional Feature Request

by aknctn » Sun Apr 14, 2024 2:59 pm

Thank you for your interest and interest. I will be waiting.

Best regards.
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm

Re: I Have an Additional Feature Request

by huynhbuutam » Thu Apr 18, 2024 3:24 am

Hi aknctn, please try this:
Open: tamit\slideshow\styles\all\template\event\overall_header_head_append.html
Find: margin-right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH + 5 }}px !important;
Replace-with: margin-right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH + 5 + S_SLIDESHOW_IMAGE_NAV_WIDTH + 5 }}px !important;

Open: tamit\slideshow\styles\prosilver\template\tamit_slideshow_default.html
Find:

Code: Select all

	<!-- Image navigator container -->
	<div class="slideshow-image-navigator-container">
		{% for slide in SLIDESHOW_SLIDES %}
		<img class="slideshow-image-navigator" src="{{ slide.slide_image }}" title="{{ slide.slide_title }}" onclick="currentSlide({{ loop.index }})"/>
		{% endfor %}
	</div>
Replace-with:

Code: Select all

	<!-- Image navigator container -->
	<div class="slideshow-image-navigator-container" style="right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH - 15 }}px">
		{% for slide in SLIDESHOW_SLIDES %}
		<img class="slideshow-image-navigator" src="{{ slide.slide_image }}" title="{{ slide.slide_title }}" onclick="currentSlide({{ loop.index }})"/>
		{% endfor %}
	</div>
	<!-- Item navigator container -->
	<div class="slideshow-image-navigator-container" style="background-color: #ffffff">
		{% for slide in SLIDESHOW_SLIDES %}
		<a class="slideshow-image-navigator" style="margin: 10px" href="#" onclick="currentSlide({{ loop.index }}); return false;">{{ slide.slide_title }}</a>
		{% endfor %}
	</div>
And finally, purge the cache
User avatar
huynhbuutam
Registered User
Posts: 39
Joined: Wed Dec 01, 2021 4:15 pm
Location: Viet Nam
Name: Huynh Buu Tam

Re: I Have an Additional Feature Request

by aknctn » Thu Apr 18, 2024 6:07 am

First of all, thank you very much for your consideration and quick conclusion.

I followed the steps and reset the plugin from the added control panel, but the texts were intertwined as seen in the screenshot. And some images disappeared.

I want to sort the titles side by side in 2 columns. The slide visual area may narrow towards the left. Make the title area large.
Ekran görüntüsü 2024-04-18 091510.png
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm

Re: I Have an Additional Feature Request

by huynhbuutam » Thu Apr 18, 2024 6:22 am

I don't see any screenshots (sorry, now I see it), can you provide a demonstration link?
User avatar
huynhbuutam
Registered User
Posts: 39
Joined: Wed Dec 01, 2021 4:15 pm
Location: Viet Nam
Name: Huynh Buu Tam

Re: I Have an Additional Feature Request

by aknctn » Thu Apr 18, 2024 6:39 am

The problem in the images is due to working with a computer. Safe network! The system gave some warnings. I was able to view the images via mobile internet on a different computer.

Focus on expanding the headings and list layout if you wish.

https://www.teknofenomen.com/forum
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm

Re: I Have an Additional Feature Request

by huynhbuutam » Fri Apr 19, 2024 2:51 am

The instructions above apply to the default theme (ProSilver), for your theme, follow these instructions (with 2 additional columns as you mentioned):
Open: tamit\slideshow\styles\all\template\event\overall_header_head_append.html
Find: margin-right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH + 5 }}px !important;
Replace-with: margin-right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH + 5 + S_SLIDESHOW_IMAGE_NAV_WIDTH * 2 + 25 }}px !important;

Open: tamit\slideshow\styles\prosilver\template\tamit_slideshow_default.html
Find:

Code: Select all

	<!-- Image navigator container -->
	<div class="slideshow-image-navigator-container">
		{% for slide in SLIDESHOW_SLIDES %}
		<img class="slideshow-image-navigator" src="{{ slide.slide_image }}" title="{{ slide.slide_title }}" onclick="currentSlide({{ loop.index }})"/>
		{% endfor %}
	</div>
Replace-with:

Code: Select all

	<!-- Image navigator container -->
	<div class="slideshow-image-navigator-container" style="right: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH * 2 + 10 }}px;">
		{% for slide in SLIDESHOW_SLIDES %}
		<img style="padding: 0;" class="slideshow-image-navigator" src="{{ slide.slide_image }}" title="{{ slide.slide_title }}" onclick="currentSlide({{ loop.index }})"/>
		{% endfor %}
	</div>
	<!-- Item navigator container -->
	<div class="slideshow-image-navigator-container" style="background-color: #ffffff; right: -15px; width: {{ S_SLIDESHOW_IMAGE_NAV_WIDTH * 2 + 35 }}px;">
		<ul style="columns: 2; -webkit-columns: 2; -moz-columns: 2; padding: 5px;">
		{% for slide in SLIDESHOW_SLIDES %}
		<li><a class="slideshow-image-navigator" style="margin: 10px;" href="#" onclick="currentSlide({{ loop.index }}); return false;">{{ slide.slide_title }}</a></li>
		{% endfor %}
		</ul>
	</div>
Note the related properties with the value S_SLIDESHOW_IMAGE_NAV_WIDTH, which can change the width of the columns.

And finally, purge the cache

I can only help you this far, the rest is up to you. Regards.
User avatar
huynhbuutam
Registered User
Posts: 39
Joined: Wed Dec 01, 2021 4:15 pm
Location: Viet Nam
Name: Huynh Buu Tam

Re: I Have an Additional Feature Request

by aknctn » Sat Apr 20, 2024 9:54 am

Thank you very much for this, I would like to buy you a coffee. Please add this option to your plugins area.

I'm not very familiar with coding, I'll try to figure out how to customize it over time. Such as expanding the text area and columns, adding bold font and bullet symbols. I can't ask for anything more from you anymore. :) I hope you keep this plugin updated to be compatible with future versions.

Thank you.
Kind regards.
aknctn
Registered User
Posts: 138
Joined: Fri May 03, 2019 2:10 pm