I'm stuck. Any help is appreciated.
Goal...
When in a Joomla content blog view I show an intro image, I want, on hover, to fade it to 20% and show the intro text, in black, on top of the intro image.
What I've done so far...
Alter the Joomla core file blog_item.php from
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
to
<?php echo '<div id="box">'; ?>
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
<?php echo '<div id="overlay">'; ?>
<?php echo $this->item->introtext; ?>
<?php echo '</div>'; ?>
<?php echo '</div>'; ?>
and added CSS for opacity and positioning.
The problem is... The div overlay hovers over the introduction-image-link. So it's no longer clickable.
My question... How can I give the div overlay the same href as the introduction-image?
Thanks for your help.
The simplest way that I can think of right away is to implement a click listener on the overlay div and take the user to the desired url using window.location
Related
I have a WP site and I am trying to achieve the following. I need on 3 different pages a separate image in the footer.
I did find an answer how to do it the following way placing this code in the footer:
<?php
if(is_page(4)):
?>
<div class="images"><img src="url-image-location" alt="alt info" class="img-responsive"></div>
<?php endif; ?>
The above way works great but i'm lost on how to add it for the another page. I tried just repeating the above code again and changing the page and image url but then I lose styling from the rest of footer.
So question is, how do I add it a second time?
Thanks
What about using elseif and just change the image path variable so you won't loose styling? i assume your css is written for class.
<?php
$image_path = "imagepath";
if (is_page(4)) {
$image_path = "imagepath-4";
}
else if (is_page(5)) {
$image_path = "imagepath-5";
}
else if (is_page(6)) {
$image_path = "imagepath-6";
}
?>
<div class="images"><img src="<?php echo $image_path?>" alt="alt info" class="img-responsive"></div>
I have little problem floating text and image in wordpress post. I want to have little space between text and picture. When I try to make it with merge or padding in css, It does nothing or text goes below pic. please help me, page url: http://uglt.org/new/?p=2224
see pic, how I want to be and how is it: http://i.stack.imgur.com/wNUxq.jpg
php code:
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/><div class="singu"><?php the_content(); ?></div>
<?php endif; ?>
<div class="entry-content">
By the way when I try to make these two class into one div It goes below too. Please help me, thank you in advance.
Try adding a padding-right to the image element.
Just use the css property:
margin-right:10px
for example, having the class:
.rightSpacing {
margin-right:10px
}
then you could use
<img class="img-responsive singlepic rightSpacing" src="<?php echo $image ?>"/>
use the number of pixels you might feel necessary, 10 is just an example.
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
I am using lightbox to show an image in php.
My current code:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" class="photo_frame photo_size" >
<br />
<?php
echo $res['title'];
?>
</a>
CSS and JS for lightbox have already been included. In the above code, $res['title'] and $res['path'] are being fetched from database.
If I click on the image or the text which is showing as $res['title'], lightbox effect is showing. The image is within the lightbox. Now I need the $res['title'] value also be displayed when the lightbox is opened along with the image.
How do I do that?
Just use the title parameter in the <a> tag, as mentionned in the Lightbox Documentation:
Optional: Use the title attribute if you want to show a caption.
You must add the title:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" title="
<?php
echo $res['title'];
?>
" class="photo_frame photo_size" >
</a>
You should be able to move all of your markup into a div. Add rel="lightbox" to that div, it should work. Although that depends on the lightbox library you are using.
I added the Facebook comment code in to a Wordpress comment
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
The result is what I wanted, but the styling is not.
Here's site and a screenshot:
As you can see from the image.
the text for "1656 Awesome Words" is smaller than "Description" & "Additional Information"
How can I make the font sizes the same?
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
Above your original code...
Below a minor alteration
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</div></a></li>
<br>
<?php endif; ?>
inside your li and a tags you open a div tag "fb-root" but you are not closing it before closing the a and li tags. Thus having a broken tag, this may or may not be part of the issue directly but having broken unclosed tags can sometimes result in adverse undesired effects.
Also Im gonna take a wild guess and assume you have multiple div's with the ID fb-root on your page, which may also be causing conflict. However all in all. It being in the fb-root div, the facebook styling is overriding your styling as FB loads its styling after page load. So your comment tag is inheriting its styling rather than your initial styling. Facebook through that javascript you include for it, is basically rewriting the css/style properties of all elements within the fb-root div after its loaded into the DOM.