Image Slider for Berlin theme

Anyone have any idea of how to add a jQuery based image slider to the Berlin theme?

I want to place the code where I have "Test test test" below in header.php:

<div id="primary-nav">
             <?php
                  echo public_nav_main();
             ?>

         </div>

         <div id="mobile-nav">
             <?php
                  echo public_nav_main();
             ?>
         </div>
        <?php echo theme_header_image(); ?>
		<div id="theme_header_image">
        Test test test
		</div>

...Has anyone successfully done this?

Also, would the jQuery code need to go in the queue_js_file section of the code?

I am attempting to use this jQuery slider, by the way: http://marktyrrell.com/labs/blueberry/

i used flexslider on my browse pages. add the script to the header.php file then call it like this:

<div id="browse" class="flexslider">
<ul class="slides">
<?php foreach (loop('items') as $item): ?>

 <?php if (metadata('item', 'has thumbnail')): ?>

<li><?php echo link_to_item(item_image('square_thumbnail')); ?></li>
<?php endif; ?>
    <?php fire_plugin_hook('public_items_browse_each', array('view' => $this, 'item' =>$item)); ?>

<?php endforeach; ?>

</div>

you can do the same thing with that one. Add the jquery to the header.php (or footer) so its available to all pages and then loop through images-- either like i did (on all browse pages-- browse.php) or using any other kind of search like

<?php $items = get_records('Item', array('tags'=>'Beethoven'), 20); 

set_loop_records('items', $items);
?>

<div id="browse" class="flexslider">
<ul class="slides">
<?php foreach (loop('items') as $item): ?>
 <?php if (metadata('items', 'has thumbnail')): ?>
<li><?php echo link_to_item(item_image('square_thumbnail')); ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Thanks for responding! If I wanted to place this slider on the home page, would I still need the browse attributes associated with the code?

So I tried to implement the Flexslider to my site here: http://archives.jacksoncenter.info/ ... but no go.

Here is how I placed the jQuery in my header.php file:

<!-- JavaScripts -->
	<?php queue_js_file('vendor/jquery.flexslider-min', 'javascripts'); ?>
    <?php queue_js_file('vendor/modernizr'); ?>
    <?php queue_js_file('vendor/selectivizr', 'javascripts', array('conditional' => '(gte IE 6)&(lte IE 8)')); ?>
    <?php queue_js_file('vendor/respond'); ?>
    <?php queue_js_file('globals'); ?>

<script type="text/javascript">
  jQuery(window).load(function() {
	jQuery('.flexslider').flexslider({
	animation: "slide"
  });
 });
</script>
    <?php echo head_js(); ?>
</head>

And here is where it is called further down the same page in a class:

<div id="theme_header_image" class="flexslider">
	    	   	<ul class="slides">
					<li>
					<img src="<?php echo img('image1_resized.jpg'); ?>" />
					</li>
					<li>
					<img src="<?php echo img('image2_resized.jpg'); ?>" />
					</li>
				</ul>
		</div>

Could I maybe be calling the jQuery incorrectly? From my console, it seems to say that the jQuery is "undefined"...

I suspect that's right. The javascripts are added to the page by <?php head_js(); ?>, which means that when you do

<script type="text/javascript">
  jQuery(window).load(function() {
	jQuery('.flexslider').flexslider({
	animation: "slide"
  });
 });
</script>

that happens before any of the jQuery files have been added to the page

I got it! All I needed to do was switch
<?php head_js(); ?>

and the <script type ="text/javascript">... code.

Thanks, patrickmj!

I'm attempting to implement this on our homepage using a different JQuery solution (http://www.jssor.com/development/index.html#basicusage).

Right now the pertinent snippet in my header.php is as follows:

<!-- JavaScripts -->
<?php queue_js_file('vendor/modernizr'); ?>
<?php queue_js_file('vendor/selectivizr', 'javascripts', array('conditional' => '(gte IE 6)&(lte IE 8)')); ?>
<?php queue_js_file('vendor/respond'); ?>
<?php queue_js_file('globals'); ?>
<!--minimum js for JSSOR slider -->
<?php queue_js_file('jquery-1.9.1.min'); ?>
<?php queue_js_file('jssor.slider.mini'); ?>
<?php echo head_js(); ?>

<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>

</head>

while my HTML is:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 100%; height: auto;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: auto;">
<div><img u="image" src="<?php echo img('slideshow-1.jpg'); ?>" /></div>
<div><img u="image" src="<?php echo img('slideshow-2.jpg'); ?>" /></div>
</div>
</div>

The slideshow's not displaying, though: http://omeka-dev.med.yale.edu/project/

Where might I have gone wrong?

Never mind! I went with the FlexSlider solution like the earlier posters and it worked right away ;-)