Skip Navigation

[Fermé] Marquee in stead of carousel

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Marqué : 

This topic contains 1 réponse, has 2 voix.

Last updated by Riccardo Strobbia Il y a 6 années et 7 mois.

Assigned support staff: Riccardo Strobbia.

Auteur
Publications
#294962

Hi,

I'm not very experienced with WP and coding but I would like to use a marquee instead of using the carousel. How would you suggest I go about doing this?

#295042

Dear Nthulanem,

if you downloaded our Bootstrap 3 Demo for Layouts theme, you will find a dd-layouts-cells folder with a bunch of example custom cells.

What I suggest is to create a custom cell specifically for the marquee slider.

You can start by creating a layouts-marquee-slider-cell.php files in the dd-layouts-cells folder with this content:

<?php
/*
 * Marquee-slider cell type.
 * Bootstrap thumbnail component that displays box with image, header and text. Suitable for callout boxes, key features, services showcase etc.
 *
 */

if ( ! function_exists('register_marquee-slider_cell_init') )
{
	function register_marquee_slider_cell_init() {
		if ( function_exists('register_dd_layout_cell_type') ) {
			register_dd_layout_cell_type ('marquee-slider-cell',
				array(
					'name'					   => __('Marquee-slider', 'wpbootstrap'),
					'icon-css'				   => 'icon-picture',
					'description'			   => __('A cell that displays box with image, header and text. Suitable for callout boxes, key features, services showcase etc.', 'wpbootstrap'),
					'category'				   => __('Example cells', 'wpbootstrap'),
					'category-icon-css'		   => 'icon-sun',
					'button-text'			   => __('Assign marquee-slider cell', 'wpbootstrap'),
					'dialog-title-create'	   => __('Create a new marquee-slider cell', 'wpbootstrap'),
					'dialog-title-edit'		   => __('Edit marquee-slider cell', 'wpbootstrap'),
					'dialog-template-callback' => 'marquee_slider_cell_dialog_template_callback',
					'cell-content-callback'	   => 'marquee_slider_cell_content_callback',
					'cell-template-callback'   => 'marquee_slider_cell_template_callback',
					'preview-image-url'		   => get_template_directory_uri() . 'https://cdn.toolset.com/dd-layouts-cells/images/layouts-imagebox-cell.jpg',
					'register-scripts'		   => array(
						array( 'ddl_media_uploader_js', get_template_directory_uri() . 'https://cdn.toolset.com/dd-layouts-cells/js/ddl-media-uploader.js', array( 'jquery' ), WPDDL_VERSION, true ),
						),
					'translatable_fields'	   => array(
						array('name' =>'box_title', 'title' => 'Box Title', 'type' => 'LINE'),
						array('name' => 'box_content', 'title' => 'Box Content', 'type' => 'AREA')
						),
					)
);
}
}
add_action( 'init', 'register_marquee_slider_cell_init' );


function marquee_slider_cell_dialog_template_callback() {
	ob_start();
	?>

	<h3>
		<?php the_ddl_cell_info('name'); ?>
	</h3>
	<ul class="ddl-form">
		<li>
			<label for="<?php the_ddl_name_attr('box_title'); ?>"><?php _e('Cell title', 'wpbootstrap') ?>:</label>
			<input type="text" name="<?php the_ddl_name_attr('box_title'); ?>">
		</li>
		<li>
			<h3><?php _e('Slides', 'ddl-layouts'); ?></h3>

			<?php ddl_repeat_start( 'slider', __( 'Add another slide', 'ddl-layouts' ), 10 ); ?>

			<div class="js-ddl-media-field">
				<label for="<?php the_ddl_name_attr('slide_url'); ?>"><?php _e( 'Image', 'ddl-layouts' ) ?>:</label>
				<input type="text" class="js-ddl-media-url" name="<?php the_ddl_name_attr('slide_url'); ?>" />
				<p class="ddl-form-button-wrap">
					<button class="button js-ddl-add-media"
					data-uploader-title="<?php _e( 'Choose an image', 'ddl-layouts' ) ?>"
					data-uploader-button-text="Insert image URL"><?php _e( 'Choose an image', 'ddl-layouts' ) ?>
				</button>
			</p>
		</div>
		<p>
			<label for="<?php the_ddl_name_attr('slide_title'); ?>"><?php _e( 'Caption title', 'ddl-layouts' ) ?>:</label>
			<input type="text" name="<?php the_ddl_name_attr('slide_title'); ?>">
		</p>
		<p>
			<label for="<?php the_ddl_name_attr('slide_text'); ?>"><?php _e( 'Caption description', 'ddl-layouts' ) ?>:</label>
			<textarea name="<?php the_ddl_name_attr('slide_text'); ?>" rows="3"></textarea>
			<span class="desc"><?php _e('You can add HTML to the slide description.', 'ddl-layouts'); ?></span>
		</p>

		<?php ddl_repeat_end(); ?>
	</li>
</ul>

<?php
return ob_get_clean();
}


	// Callback function for displaying the cell in the editor.
function marquee_slider_cell_template_callback() {
	return 'box_title';
}


	// Callback function for display the cell in the front end.
function marquee_slider_cell_content_callback() {
	ob_start();
	?>

	<style>
	<!--
		ul.slide{margin:0;
			padding:0;
			height:80px;
			list-style-type:none;}
			ul.slide li{float:left;
				list-style-type:none;}
				ul.slide img{border:1px solid silver;
					height:80px;}
					-->
				</style>

	<script type="text/javascript">
			//Plugin start
			(function($)
			{
				var methods = 
				{
					init : function( options ) 
					{
						return this.each(function()
						{
							var _this=$(this);
							_this.data('marquee',options);
							var _li=$('>li',_this);

							_this.wrap('<div class="slide_container"></div>')
							.height(_this.height())
							.hover(function(){if($(this).data('marquee').stop){$(this).stop(true,false);}},
								function(){if($(this).data('marquee').stop){$(this).marquee('slide');}})
							.parent()
							.css({position:'relative',overflow:'hidden','height':$('>li',_this).height()})
							.find('>ul')
							.css({maxWidth:screen.width*2,position:'absolute'});

							for(var i=0;i<Math.ceil((screen.width*3)/_this.width());++i)
							{
								_this.append(_li.clone());
							} 

							_this.marquee('slide');});
					},

					slide:function()
					{
						var $this=this;
						$this.animate({'left':$('>li',$this).width()*-1},
							$this.data('marquee').duration,
							'swing',
							function()
							{
								$this.css('left',0).append($('>li:first',$this));
								$this.delay($this.data('marquee').delay).marquee('slide');

							}
							);

					}
				};

				$.fn.marquee = function(m) 
				{
					var settings={
						'delay':2000,
						'duration':900,
						'stop':true
					};

					if(typeof m === 'object' || ! m)
					{
						if(m){ 
							$.extend( settings, m );
						}

						return methods.init.apply( this, [settings] );
					}
					else
					{
						return methods[m].apply( this);
					}
				};
			}
			)( jQuery );

 //Plugin end
 
 //call
jQuery(document).ready(
 	function(){jQuery('.slide').marquee({delay:3000});}
 	);
</script>

<ul class="slide">
	<?php while ( has_ddl_repeater('slider') ) : the_ddl_repeater('slider'); ?>

		<li class="item <?php if (get_ddl_repeater_index() == 0) { echo ' active'; } ?>"
                        <?php // Cover image to slide
                        if( get_ddl_field('image_size') == 'cover' ): ?>
                        style="background: url(<?php the_ddl_sub_field('slide_url'); ?>) no-repeat; background-size:cover;"
                    <?php endif;?>
                    >
                    <?php if( get_ddl_field('image_size') == '' ): ?>
                    	<img src="<?php the_ddl_sub_field('slide_url'); ?>">
                    <?php endif;?>    
                    <div class="carousel-caption">
                    	<h4>
                    		<?php the_ddl_sub_field('slide_title'); ?>
                    	</h4>
                    	<p>
                    		<?php the_ddl_sub_field('slide_text'); ?>
                    	</p>
                    </div>
                </li>

            <?php endwhile; ?>
        </ul>

        <?php
        return ob_get_clean();
    }
}

This code is only a - working - proof of concept but needs fine tuning (some simple CSS and Javascript work is required to adjust the width and the style of the slider, but most of it should be already in place).

Once the file will be created you will find an additional cell you can add to your layouts, please test it and fine tune it reading the code carefully.

Hope this helps, best regards
Riccardo

Le sujet ‘[Fermé] Marquee in stead of carousel’ est fermé à de nouvelles réponses.