Adding a Slideshow to your Site

There are a couple of ways to add a slideshow to your mojo site:  using a Flickr widget, or simply adding the images yourself to your site.  Demos of each are below.  Since excellent tutorials have already been written on this process, please see the links below for instructions on how to do this yourself!

Adding Images Directly To MojoPortal:

http://blog.arvixe.com/mojoportal-tip-an-effortless-slideshow-in-under-5-minutes/

Using the Flickr Slide Show:

http://www.mojoportal.com/using-the-flickr-slide-show.aspx

Note that the Flickr widget requires users to have Silverlight installed on their computer.  If your slideshow’s content is not critical to your page’s message, then using the Flickr widget is okay; otherwise, please use the other method outlined above, since it only requires a user to have javascript enabled in their browser, which most do.

I also highly recommend http://bxslider.com (for slideshows of non-img elements, although you could just use mojo’s built in cycle js) and the nivo slider (see more at http://www.mojoportal.com/using-nivo-slider or at http://nivo.dev7studios.com/

 

Flickr Slide Show

This content requires Microsoft Silverlight. Get Microsoft Silverlight

 

jQuery Cycle Slideshow w/ Links

    Note: if jQuery Cycle is NOT already being utilized on the page, you can instead use this javascript:       <script src="/ClientScript/jqmojo/jquery.cycle.all.min.js" type="text/javascript"></script>     <script type="text/javascript">          //adding this js code is necessary to override mojo's default slideshow code          $(document).ready(function () {              $('div.image-slideshow').cycle({ fx: 'fade', timeout: 5000, speed: 1000 });              $('div.image-slideshow img').click(function () {                  document.location.href = $(this).attr('rel');              }).css('cursor', 'pointer');          });      </script>      Otherwise, if it is, this will suffice:      <script type="text/javascript">              $('div.image-slideshow').cycle({ fx: 'fade', timeout: 5000, speed: 1000 });              $('div.image-slideshow img').click(function () {                  document.location.href = $(this).attr('rel');              }).css('cursor', 'pointer');      </script>      <div class="image-slideshow">          <img alt="Books" rel="http://www.health.colostate.edu/miab" src="/Data/Sites/3/images/slideshow/Books.jpg"              style="width: 475px;" />          <img alt="Ping Pong" rel="http://www.health.colostate.edu/miab" src="/Data/Sites/3/images/slideshow/PingPong.jpg"              style="width: 475px;" />          <img alt="Sun Burn" rel="http://www.health.colostate.edu/miab" src="/Data/Sites/3/images/slideshow/Sunburn.jpg"              style="width: 475px;" />          <img alt="Sunglasses" rel="http://www.health.colostate.edu/miab" src="/Data/Sites/3/images/slideshow/Sunglasses.jpg"              style="width: 475px;" />       </div>

 

jQuery Cycle Slideshow With External Text/Image Links Plus Outbound Link Tracking

Use the same principle as the above jQuery Cycle code, but alter your JS as follows:

<script type="text/javascript">
$('.directory-slideshow div a').click(function () {
try {
_gaq.push(['_trackEvent', 'Outbound Links' , $(this).attr('href')]);
} catch(err){}

document.location.href = $(this).attr(‘href’);

}).css(‘cursor’, ‘pointer’);

$(‘.directory-slideshow img’).click(function () {
try {
_gaq.push([‘_trackEvent’, ‘Outbound Links’ , $(this).attr(‘rel’)]);
} catch(err){}

document.location.href = $(this).attr(‘rel’);

}).css(‘cursor’, ‘pointer’);
</script>

For more on outbound link tracking, please see https://support.google.com/analytics/answer/1136920?hl=en

 

jQuery Slideshow w/ Image Preview

Download the zipped file

 

jQuery Cycle Slideshow with Captions

SAHE Class of 2014 SAHE Class of 2013 SAHE Class of 2012 SAHE Class of 2011 SAHE Class of 2010 SAHE Class of 2009

 

Standard Mojo SlideShow (using jQuery Cycle)

Code to create the slideshow below:

<div class="image-slideshow">
<img alt="Image 1" src="/Data/Sites/5/UserFiles/MojoPortal/images/anchor.JPG" style="width: 379px; height: 328px; " />
<img alt="Image 2" src="/Data/Sites/5/pc-enter.png" style="width: 257px; height: 232px; " />
<img alt="Image 3" src="/Data/Sites/5/UserFiles/nettiers/rideshare-schema.gif" style="width: 859px; height: 1152px; " />
</div>

Note that the slideshow doesn’t need to be images – it could also be text:

<div class="image-slideshow">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>

 

Text directions for accomplishing the above:

  1. First, let’s activate the slideshow by clicking “Settings” (next to your HTML module) –> “Slideshow Settings”.
  2. Check “Enable Slideshow of Elements”.
  3. Consider changing other settings as desired; typically I only use “fade” for a transition.  Eg:Slideshow Settings
  4. Finally, for “CSS Class For Slide Container div” enter any desired name.  Typically I use something like “slideshow” or “image-slideshow”
  5. Click “Save”
  6. Next, add all of your images within the HTML editor instance whose settings you just changed. Try to ensure the images are of the same size and width
  7. Click Source within the editor and wrap your images with the following HTML tag: <div class=”image-slideshow”>.  Be sure to also add a closing </div> after your last image.  Note that the class name (“image-slideshow”) can be whatever you want – you’d just have to use whatever you typed in the textbox for “CSS Class For Slide Container div”.
  8. Now Update your page.  Your slideshow should now be working

 

Another Tutorial: http://blog.arvixe.com/mojoportal-tip-an-effortless-slideshow-in-under-5-minutes/

Image 1 Image 2 Image 3