<script>
jQuery(document).ready(function () {jQuery('.click').on('click', function(e){
jQuery(".precios").toggle(); jQuery(this).toggleClass('class1', 1000, "easeOutSine")});
});
</script>
<div class="cabecera">
<p><strong>GRUPO SETOR:</strong> CONOCE NUESTRA RED DE ESTACIONES
<? if( current_user_can('editor')||current_user_can('administrator')){ ?><a class="editar" href="<?php echo get_admin_url(); ?>/post.php?post=213&action=edit ">editar</a>
<?php }?>
<span class="editar click">ver precios</span>
</p>
</div>
<div id="gasolineras">
<div class="dentro">
<?php // WP_Query arguments
$args = array (
'post_type' =>'gasolinera',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page'=> -1
);
$lasto=1;
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post();?>
<?php if ($lasto==4){ $ultimo='last';$lasto=1; }else{ $ultimo=''; $lasto++;} ?> <div class="gasolinera <? //echo $ultimo;?>">
<div id="foto_home">
<? $fotos= get_field('galeria_de_fotos_imagen'); $i = 0; foreach($fotos as $foto){ //print_r($foto);
$i++;
if ($i == 1){$last="first";?> <a href="<?php the_permalink()?>"><img class="foto-home <?php echo $last; ?>" width="300" src="<?php echo $foto['original']?>"/></a>
<?php }else{ $last=""; } ?> <?php } ?>
<a href="<?php the_permalink();?>" class="mas">+</a>
<div class="precios class1">
<?php $laID = get_the_ID();
$elementos = get_group('gasolinera',213); //print_r($elementos);
foreach($elementos as $elemento){ if ($elemento['gasolinera_seleccione_gasolinera'][1] == $laID){ echo '<ul>';
foreach($elemento as $key => $precio){
if ($key != 'gasolinera_seleccione_gasolinera') {?> <li>
<span class="tipo" style="color: #808080; "><?php
$key = str_replace('gasolinera_','',$key); $key = str_replace('_',' ',$key); $key = ucwords($key);
$key = str_replace('Sp','SP',$key); $key = str_replace('E 10','e+ 10',$key); $key = str_replace(' E',' e',$key); echo $key;?>: </span> <span class="precio"><?php
$precioeuro= str_replace(' €','',$precio[1]); echo $precioeuro;?> €</span>
</span>
</li>
<?php }
//print_r($precio);
}
echo '</ul>';
}
}
?>
</div><!-- fin precios -->
</div>
<h3><span class="tit"><?php echo get('primera_columna_titulo'); ?></span></h3>
</div>
<?php }
} else { // no posts found
}
// Restore original Post Data
wp_reset_postdata();
?>
</div>
</div>
<style>
.class1{ display: none;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
}
.editar{ display:inline-block;}
.baneres img{ max-width:100%;
height:auto;
}
.foto-home{ width: 100%;
height: auto;
margin: 0;
display:block;
}
.horario{ height:30px;
padding: 5px;
}
#gasolineras p{
margin: 0px;
line-height: 12px;
font-size: 12px;
}
#gasolineras{
width: 100%;
background-color: #E7E7E7;
display: inline-block;
padding: 0px;
}
#gasolineras .dentro{
padding: 20px 0 10px 20px;
margin: 0px;
}
.cabecera{display: inline-block;
width: 100%;
background: #3c93d9;
margin: 0px;
color: white;
padding: 0px;
}
.cabecera p{ padding: 5px 20px;
font-size: 16px;
margin: 0px;
}
.gasolinera{/*height: 250px;*/
width:22%;
float: left;
margin-right: 3%;
margin-bottom: 20px;
}
#foto_home
{ position:relative;
}
.direccion{ height: 20px;
font-size: 11px;
}
.direccion, .masdetalles {display: inline-block;
padding: 5px;
}
.gasolinera h3 { font-size: 12px;
color: #3c93d9;
background: none repeat scroll 0 0 #fff;
width: 100%;
margin: 0px;
padding: 0px;
}
#gasolineras h3 .tit{
padding: 5px;
font-weight: bold;
}
#foto_home .precios {
background-color: white;
color: #3c93d9;
top:0;
left:0;
position: absolute;
width: 100%;
margin: 0px;
padding: 0px;
height:100%;
}
.mas{ background-color: white;
color: #3c93d9;
top:0;
right:0;
position: absolute;
width: 20px;
height:20px;
margin: 0px;
padding: 0px;
text-align:center;
color: #3c93d9;
font-weight:bold;
}
.tipo{ width: 67%;
display: inline-block;
text-align: left;
}
.precio{ width: 30%;
display: inline-block;
text-align: right;
color: #3c93d9
}
.precios ul{ list-style: none;
margin: 0px;
padding: 5px;
}
.precios ul li{display: inline-block;
width: 100%;
margin: 0px;
line-height: 12px;
font-size: 12px;
}
.editar, a.editar { margin-left: 20px;
font-size: 11px;
color: white;
background-color: #263A8A;
padding: 3px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 100%;
cursor:pointer;
}
@media only screen and (max-width: 959px) and (min-width: 768px){.gasolinera{/*height: 250px;*/
width:30%;
float: left;
margin-right: 3%;
}
.four_fifth { width:79.2%;
}
}
@media only screen and (max-width: 767px) and (min-width: 480px){.gasolinera{/*height: 250px;*/
width:47%;
float: left;
margin-right: 3%;
}
#post-15 .baneres p{
width: 200px;
text-align: center;
margin: auto;
display: block;
}
}
@media only screen and (max-width: 480px){.gasolinera{/*height: 250px;*/
width:93%;
float: left;
margin-right: 6%;
text-align: center;
}
#post-15 .baneres p{
width: 200px;
text-align: center;
margin: auto;
display: block;
}
}
@media only screen and (min-width: 939px){#rev_slider_1_1, #rev_slider_1_1_wrapper {
width: 940px;
height: 250px;
}
.four_fifth { width:79.2%;
}
}
@media only screen and (max-width: 939px) and (min-width: 780px){#rev_slider_1_1, #rev_slider_1_1_wrapper {
width: 750px;
height: 200px;
}}
</style>
