How to center an object in the galleria slider
I'm using the Galleria plugin, but what I want to do is the center of the main object, which is the audio player inside the galleria slider. But how can I do this?
Below is the main gallery style:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
I have a demo app page here: DEMO
UPDATE:
Below is the current code where you can select each specific audio player in the slider and center it:
<?php
$j = 0;
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<a href="audio.php?key=<?php echo $key; ?>&j=<?php echo $j; ?>&a=<?php echo $a; ?>"><img class="iframe" src="Images/audiothumbnail.png"></a>
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
$(window).load(function(){
var key = '<?php echo $key; ?>';
var j = '<?php echo $j; ?>';
$("#galleriaaudio_"+key)
.find("iframe")
.contents()
.find("#jp_container_"+key+"-"+j)
.attr('style', 'margin: 0 auto');
});
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
Below is releavt divs belonging to each audio player which gives each audio player uniqueness:
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
+3
source to share
5 answers
You can try using below css for the problem.
CSS
File: http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.css
Line: 33
div.jp-audio {
margin: 0 auto;
width: 420px;
}
Screenshot:
+7
source to share
At http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.css change this:
div.jp-audio {
width:420px;
}
to
div.jp-audio {
width:420px;
margin:0 auto;
}
Margin 0 auto is often used to center the right way elements.
0
source to share