I am new to Drupal 7's theme system. i am creating a custom theme that have image gallery inside it.but i have no idea for implementing jquery image gallery in drupal theme tpl.php files. i searched many tutorials about image gallery in drupal theme. but most of them just show implementation of image gallery using views and gallery related modules. can anybody know tutorials series that show how to add js files in theme tpl.php file from scratch? and what kind of drupal variables are use for gallery purpose.
2
-
Where in your theme are you trying to place this gallery (in a block, in a node, on every page)? Also - what image gallery plugin are you trying to use?– schnippyJul 7, 2012 at 17:20
-
i wana implement image gallery without any plugin.as in blue masters theme. drupal.org/project/bluemasters– GiLLJul 8, 2012 at 12:04
Add a comment
|
1 Answer
If you want the bluemasters rotator exactly, you need to copy their javascript and css that apply to the rotator element (image_reel) and install it in your theme. The following instructions would also be relevant for other slideshow scripts with obvious substituions.
First, you need to add the rotator script from bluemasters to your theme. The name of the file is bluemasters.js and is in bluemasters/js/ in the theme folder.
To install it in your theme, you could just add it as a script tag in your page.tpl.php file in your template, ex:
<script type="text/javascript" src="<?php echo path_to_theme(); ?>/path/to/bluemasters.js"></script>
There are much better ways of adding this, using drupal_add_js and page_preprocess functions but this is the easiest way to make sure it is loaded on every page.
Next, you're going to need to isolate the css bluemasters is using to create their slider. From their css file, it looks like all of the css for the front page slider is in one block in the file, starting with the comment 'Front-page slider'
/*
* Front-page Slider
*/
.main_view { float: left; position: relative; }
...etc.
Grab that and add it to your theme's css file.
If you've got these two files added to your theme correctly, then anywhere the image_reel class exists (with the following structure) on your pages, their code will convert it into a slideshow. The exact structure (from their demo file) is just a list of links like this:
<div class="image_reel">
<a href="/bluemasters/node/3"><img src="/bluemasters/sites/all/themes/bluemasters/images/slide-image-3.jpg"></a>
<a href="/bluemasters/node/2"><img src="/bluemasters/sites/all/themes/bluemasters/images/slide-image-2.jpg"></a>
<a href="/bluemasters/node/1"><img src="/bluemasters/sites/all/themes/bluemasters/images/slide-image-1.jpg"></a>
</div>
You can add this code in as a block or on a page or in your template directly and it will create the same slider effect.
-
@schnippy Why to add the JS script in page.tpl.php file? Aren't tpl.php files just for html and markup? Correct my understanding please. Aug 2, 2015 at 20:36
-
1@Code_Jamer - correct, there are much better ways of adding this, ex. using drupal_add_js and page_preprocess functions but per OP's question from 3 years ago, this is how you could add it to page.tpl.php.– schnippyAug 4, 2015 at 16:35