Skip to content

matthewaprice/U-Choose-Slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 

Repository files navigation

U-Choose-Slider

WordPress Plugin that simply stores data for a slider and then gives a template tag so that you can use your own slider of choice.

Unpack the zip folder and upload the "u-choose-slider" folder into your wp-content/plugins directory

This will create a new top level menu item called "U Choose Slider"

In this section you will be able to add/edit/enable/disable your slider images

For use with jQuery Cycle

<script>
jQuery(document).ready(function() {
 	jQuery("#cycle").cycle({
		fx: "fade",
		random: 1
	});
});
</script>
<ul id="cycle">
	<?php $slider_images = get_ucs_slider_images(); ?>					
	<?php foreach ( $slider_images as $image ) : ?>
	<li>
		<a href="<?php echo $image->slider_link; ?>">
		<img src="<?php echo $image->slider_image; ?>">		
		</a>
		<div class="info-box">
			<a href="<?php echo $image->slider_link; ?>">				
				<p class="title"><?php echo $image->slider_title; ?></p>
			</a>
			<!--<p class="description"><?php echo $image->description; ?></p>-->
			<!--<p class="button-read-more"><a href="<?php echo $image->read_more_link; ?>" class="button">Read More</a></p>-->
		</div>			
		
	</li>
	<?php endforeach; ?>		
</ul>

For use with Twitter Bootstrap's Carousel

<script>
jQuery(document).ready(function() {
	jQuery('.carousel').carousel();	
});
</script>

<div id="my_carousel" class="carousel slide">
	<div class="carousel-inner">
		<?php $slider_images = get_ucs_slider_images(); ?>
		<?php
		$i = 0 ;
		foreach ( $slider_images as $img ) : ?>
		<div class="<?php echo ( $i == 0 ) ? 'active ' : ''; ?>item">
			<a href="<?php echo $img->slider_link; ?>">
			<img src="<?php echo $img->slider_image; ?>">
			<div class="carousel-caption">
				<h4><?php echo $img->slider_title; ?></h4>
				<p><?php echo $img->slider_description; ?></p>
			</div>
			</a>
		</div>
		<?php $i++; endforeach; ?>
	</div>
	<a class="carousel-control left" href="#my_carousel" data-slide="prev">‹</a>
	<a class="carousel-control right" href="#my_carousel" data-slide="next">›</a>
</div>	

Here are some screenshots to see it in action

Adding a new slider to the db

Listing of Active Slider Images

Editing a Slider Image

Inactive Slider Images show up in a separate table below the Active Slider Images

About

WordPress Plugin that simply stores data for a slider and then gives a template tag so that you can use your own slider of choice

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published