How to configure the Frontpage Slideshow

The following code (In Version Business7.0) corrected to clean urls in page--front.tpl.php is an example slideshow implementation.

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">What We Do</div>
<div class="desc" style="display: none;">Who We Are</div>
<div class="desc" style="display: none;">Bookings & Appointments</div>
</div>
</div>
 
<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
</div>
 
</div>

If someone just wants to add a new slideshow item, he can see the example below:

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-1.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/NEW-ITEM-IMAGE.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">About Business</div>
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">NEW-ITEM-DESCRIPTION</div>
</div>
</div>
 
<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a>
</div>
 
</div>

Also, here is an example with definition of links:

<div class="main_view">
 
<div class="window">
<div class="image_reel">
<a href="<?php print url('node/3'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="<?php print url('node/2'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="<?php print url('node/1'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">About Business</div>
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
</div>
</div>
 
<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
</div>
 
</div>

In any case, you can delete all the example slideshow implementation and just place in Header region the desired block (another custom block or an view slideshow block). Always be aware of the javascript file sliding_effect.js.

Comments

slideshow image overlapping

Anonymous (not verified) commented 18 June 2012 at 09:41

Hello,
I like the business theme and its very easy to use. But i have a problem with the image i placed in the slideshow image folder, they were overlapping on the front page and some are too small for the frame, is there anyway i can resize the image or from code..thanks

slideshow

vlottaaltraining commented 18 July 2012 at 17:28

I have also problems with the size, only 25% of my inserted image is shown. How do I get this right?

Have you resized the images

shabam commented 11 August 2012 at 15:27

Have you resized the images so that they are the right size for the frame?

resize slide images

alternatecloud commented 8 December 2012 at 14:25

I used 930x320 px works great. Just change out the images in business theme folder in my backup:

"To change the Slide Images, Replace the slide-image-1.jpg, slide-image-2.jpg and slide-image-3.jpg in the images folder of the Business theme folder."

hope this helps

greg

Slide Images Overlapping

kwkag commented 4 February 2014 at 17:31

This is happening because the image you are using is not wide enough. The default image size is 930 x 320. If the image you are using is narrower than 930 pi it will start loading the next image in that frame.

Resize Slideshow Image

kwkag commented 20 February 2014 at 20:24

You need to change the slider dimensions in style.css
At lines 564 and 565, you'll see the slider width and height. You can change these to the dimensions that you want. You also have to change the dimensions at lines 577 and 578. However, the height at line 578 has to be 30 px less than the height at line 565.

#slider {
position: relative;
width: 930px;
height: 350px;
margin-bottom: 40px;
}

.window {
overflow: hidden;
position: relative;
width: 930px;
height: 320px;
}

Problem under safari: Images of slideshow don't appear.

cy08 commented 15 August 2012 at 23:57

Hi there,
thanks a lot for this beautiful theme, I just love it. I use it for a few months now and it works perfectly.
That is only today I notice that the images of the front page slideshow don't appear under Safari. Is that normal? How can I solve that?
Thank you for your help.

--> I found the solution: with the update of the business theme, I just forgot to upload my images in business/images. Sorry!

How can I change the title of

infuu commented 19 November 2012 at 18:25

How can I change the title of the displayed overlay at the slides?

Change slide text titles

alternatecloud commented 8 December 2012 at 14:28

Go to Appearance in your Drupal admin page...click on Business "settings" scroll down to Slide 1 and you will see the text box...Just change the text there.

hope this helps

greg

Slideshow breaks while logged in

Bakkoda commented 30 November 2012 at 01:05

If I log out or use Incognito mode the slideshow seems to work just fine. However when I am logged in it breaks completely. Any ideas?

Slide change speed

alternatecloud commented 8 December 2012 at 14:30

Anyone know how to regulate the speed in which the slides change to the next slide?

I want to increase the speed my slides change from one to the next. The way they are now, some people that don't wait a while will not notice there is a slideshow.

Looking for help...

thanks,
greg

Hi, How to change the number

Summit commented 9 December 2012 at 16:34

Hi,
How to change the number of slides using theme settings please?
I see above in code, but I would very much be able to have extra slides added by the theme settings.
greetings, Martijn

Slide speed

El Gecko commented 13 December 2012 at 16:15

It's easy once you find it. Just edit line 44 of sliding_effect.js from the theme's js folder. It's also explained further in the code comment:

44 - }, 3000); //Timer speed in milliseconds (3 seconds)

Where are page--front.tpl.php

illohacker commented 14 February 2013 at 15:54

Where are page--front.tpl.php ?

Thanks.

sites/all/themes/business/tem

anchupans commented 29 August 2013 at 10:27

sites/all/themes/business/templates

SlideShow,

Bunion commented 8 March 2013 at 12:43

Great theme,
But how does anybody know how to change the size of the front page slideshow? i.e make the height 50 % smaller.

Many thanks in Advance,

Regards
Bunion

Slideshow images not found, solution found.

gineraso commented 15 May 2014 at 15:28

I spent a few hours trying to change the images on my site but when I did they wouldn't appear and I'd get this error if I clicked on the red X in the corner:

Page Not Found
The requested page "/?q=node/2" could not be found

I was finally able to resolve this by renaming my new images as the same name as the original. For example;

original slideshow image = business/images/slide-image-1.jpg
my slideshow image = business/images/new_image.jpg

To make it work I had to run the following command:

mv business/images/new_image.jpg business/images/slide-image-1.jpg

Answer yes to overwrite.

After I did that my new images would appear in the slideshow.

Not sure why it wouldn't work before considering the image sizes were 930x320. If someone knows what I was doing wrong I'd appreciate the feedback. Hope this helps someone.

Gineraso

slider on other pages except front

vasiliki_vmo commented 21 December 2014 at 22:13

hello, i have this similar template slider on my front page but I want it to be shown on other pages of my drupal site, not only on home. Is this possible from what I already have or do I have to create a view with a slideshow module??

thank you in advance

Is it possible to have the

Karl419 commented 22 October 2015 at 18:49

Is it possible to have the slideshow stop or pause when the mouse cursor is hovering over the images? Once the cursor is removed from the slideshow, the timings would continue. Help.

Slider translation

YordanYordanov commented 10 November 2016 at 11:20

Hello there,
I am using Business theme with multilingual Drupal 8 installation.
Is it possible to translate side title fields (/admin/appearance/settings/business -> Business Settings -> Front Page Slideshow -> Slide Title & Slide URL)? And if the answer is "yes", how can I achieve this?
Thank you in advance for any advise.
Yordan

Slideshow disseaper when logged out

larissaG commented 14 December 2016 at 19:42

I've used the theme nexus but when I log out, the slide doesn't appear. You can only see it when logged in.
I've already checked my permissions, but I did'nt find the solution.
Can someone help me?