I'm having following codes in osclass\oc-content\themes\modern\item.php,
<strong class="share"><?php _e('Map', 'modern'); ?></strong>
<strong class="share"><?php _e('Photo Gallery', 'modern'); ?></strong>
<div class="map" style="display:none;">
<?php osc_run_hook('location'); ?>
</div>
<div class="slider-wrapper theme-light image" >
<div id="slider" class="nivoSlider">
<?php if( osc_images_enabled_at_items() ) { ?>
<?php if( osc_count_item_resources() > 0 ) { ?>
<?php for ( $i = 0; osc_has_item_resources(); $i++ ) { if (osc_resource_for() == 2 ) { ?>
<img src="<?php echo osc_resource_url(); ?>" width="100%" height="240px;" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />
<?php } } ?>
<?php } ?>
<?php } osc_reset_resources(); ?>
</div>
</div>
and JavaScript code is,
$("#photo").click(function() {
$(".image").css("display","block");
$(".map").css("display","none");
});
$("#map").click(function() {
$(".map").css("display","block");
$(".image").css("display","none");
});
here photo is loading as good. But map makes following problem when I click #map.
If I load map at 1st and set display:none; to .image means, map will be loaded as fully and good.
Where is the problem?
I just tested version 3.1 and it's working on my localhost
Related
I am trying to give users the ability to pin posts from category pages:
Functionality: Hover over a post image and the pin button shows up which pins that specific post URL with title pulled from post.
The only way they should be able to pin is clicking the button, clicking anywhere on the image should take the user to the post page itself.
I know I can't have two HREF attributes but I'm stuck - this code is breaking the images entirely and none of the data is being pulled as specified (description, post url, etc).
script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<a data-pin-do="buttonPin" data-pin-hover="true" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/" href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
Thank you!
Figured out the solution in case anyone ever needs:
<div class="entry-image">
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.entry-image').mouseenter(function() {
$(this).children('.pinbutton').fadeIn('fast');
});
$('.entry-image').mouseleave(function() {
$(this).children('.pinbutton').fadeOut('fast');
});
});
</script>
<?php } ?>
I guess answer is waiting for you here: Pinterest Developers
The solution requires some js/css and (in this case) wordpress calls:
<div class="entry-image">
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.entry-image').mouseenter(function() {
$(this).children('.pinbutton').fadeIn('fast');
});
$('.entry-image').mouseleave(function() {
$(this).children('.pinbutton').fadeOut('fast');
});
});
</script>
<?php } ?>
I have a site with a sticky footer, which is not so sticky and I am having a hard time figuring it out.
This is the html part: html.tpl.php
<?php
?>
<!DOCTYPE html>
<head>
<?php $head; ?>
<title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
<?php if ($default_mobile_metatags): ?>
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_html5_shim and !$add_respond_js): ?>
<?php elseif ($add_html5_shim and $add_respond_js): ?>
<?php elseif ($add_respond_js): ?>
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="container">
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible
element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<?php print $page; ?>
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
</html>
And page.tpl.php part
<div id="navigation">
<?php print render($page['navigation']); ?>
</div>
<header class="header" id="header" role="banner">
<?php $front_page='http://kvf.fo/vit';
if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print
t('Heim'); ?>"
rel="home" class="header__logo" id="logo"><img src="<?php print
$logo; ?
>" alt="<?php print t('Heim'); ?>" class="header__logo-image" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
<h1 class="header__site-name" id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Heim');
?>" class="header__site-link" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div class="header__site-slogan" id="site-slogan"><?php print
$site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php print render($page['header']); ?>
</header>
<div id="main">
<?php print render($page['content']); ?>
</div>
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
The css part.
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
.container {
margin: 0 0 125px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
The page adress is www.kvf.fo/vit , and it seems to be working ok, but on an Ipad, the footer "sinks" halfway under the bottom of the screen, which is a bummer because the main users to the site, are Ipad users :/
Any help is much obliged!
If you want your footer to be sticky so add this property in its css
footer {
position: fixed;
}
It seems you're closing the body tag to early:
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
With the code below now working can anyone suggest how I pull out the image from the collection at a larger size, this is only working for thumbnails at the moment.
<?php
if(!hook("EditorsPick")):
/* ------------ Collections promoted to the home page ------------------- */
$home_collectionsx=get_home_page_promoted_collectionsx(16);
foreach ($home_collectionsx as $home_collectionx)
{
?>
<div class="EditorsPick">
<div class="HomePanel"><div class="HomePanelINtopEditors">
<div class="HomePanelINtopHeader">Editors Pick</div>
<div class="HomePanelINtopText">This is the editors pick of Asset Space...</div>
<div class="EditorsPicImage"><div style="padding-top:<?php echo floor((155-$home_collectionx["thumb_height"])/2) ?>px; margin-top: -24px; margin-bottom: -15px;">
<a href="<?php echo $baseurl_short?>pages/search.php?search=!collection<?php echo $home_collectionx["ref"] ?>" onClick="return CentralSpaceLoad(this,true);"><img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" /></div>
</div></div>
</div>
</div>
</div>
<?php
}
endif; # end hook homefeaturedcol
?>
function get_home_page_promoted_collectionsx($id=null)
{
$filterClause = '';
if(!is_null($id))
{
$filterClause = ' AND collection.ref = '.intval($id);
}
return sql_query("select collection.ref,collection.home_page_publish,collection.home_page_text,collection.home_page_image,resource.thumb_height,resource.thumb_width from collection left outer join resource on collection.home_page_image=resource.ref where collection.public=1 and collection.home_page_publish=1".$filterClause." order by collection.ref desc");
}
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" />
Why not edit this to set your desired size in pixels, like
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="1000" height="800" />
I have a demonstation here: DEMO
You should be able to see audio players displayed in a slider. The issue I am having is that I do not know how to center the audio player into the middle of slider. How can this be acheived and I want this working in all browsers:
Below is code displaying slider and an iframe which links to the audio player itself:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
I am using Galleria as my slider and documentation could be found here if you want to see: http://galleria.io/docs/
MORE INFORMATION:
I only want audio players in the slider to be centred in the slider.
Below is full code where if there is no audio then it displays a blank, if there is one audio then display single audio player on page (that is most of the code below), if multiple audio players then display in slder. This is for each questions even though I have not included the loop for each question in code snippet below:
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
if(count($arrAudioFile[$key]) == 1){
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
$(this).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
},
cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
<?php
}
}else if(count($arrAudioFile[$key]) > 1){
?>
<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) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure audio
You can center by adding margin: 0 auto to the element you want to center.
.jp-audio {
margin: 0 auto;
}
Please note that this only works if the element is a block element and has a set width.
Apply these styles, It should work
div.jp-audio {
margin: auto !important;
width: 85% !important;
}
First of all, my question may be unclear. I will try to explain it.
this is my html
<div class="left"><?php print $search_box; ?><?php if (!empty($logo)): ?><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" /><?php endif; ?><?php if (!empty($site_name)): ?><div id='site-name'><strong><?php print $site_name; ?></strong></div><?php endif; ?><?php if (!empty($site_slogan)): ?><div id='site-slogan'><?php print $site_slogan; ?></div><?php endif; ?></div>
looks ugly and difficult to debug, right?
so i try to indent and add newline. However, it will fails on some browser, may be IE6. The result is changed. So, What should i go, should i use another doctype?
Currently, i am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can write it this way too:
<div class="left">
<?php print $search_box; ?>
<?php if (!empty($logo)) { ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" />
</a>
<?php } ?>
<?php if (!empty($site_name)) { ?>
<div id='site-name'>
<strong>
<?php print $site_name; ?>
</strong>
</div>
<?php } ?>
<?php if (!empty($site_slogan)) { ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php } ?>
</div>
This should work in most cases, or you can use the php heredoc syntax to echo out the html stuff normally.