I use a PHP for-loop to print some portfolio items which echoes this:
echo "
<a href=\"portfoliodetail.php?id=$id\" class=\"noHover\" title=\"$title\">
<img src=\"images/portfolio/thumbnails/$bgthumbnail\" alt=\"$title\" />
</a>
";
However, I'm echoing images three times, and I want the last image to have a different margin than the others.
So I thought I'd just define a :last-child in the CSS, but when I put this margin at 0, all my margins are set at 0. Maybe when echoing this in a loop it thinks all the items are the :last-child or something? Is there a way to make the margin of the last image different?
Using CSS you can set the margin using the :last-child property
<style>
div a img{margin-left:10px;}
div a:last-child img{margin-left:50px;}
</style>
<div>
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
</div>
FIDDLE EXAMPLE
Related
This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
$config['prev_tag_close']='</button>';
This is the code in the controller. Now, I would like to add an image to this button, how do I do it? if I use an tag with source set to base_url('path/to/file.png') am getting just an empty square with white border around it. any ideas please and thank you?
Put the buttons inside a container (let div) and named with a ID say
<div id="pagin">
<button>1</button>
<button>2</button>
..................
..................
<button>10</button>
</div>
Now just use this bellow script.
<script>
var img = <?= base_url('path/to/file.png'); ?>
$('#pagin button').html('<img src="+img+" alt="image alt text">');
// This will display the image on every button
$('#pagin button:first-child').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the first button
$('#pagin button:last-child').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the last button
$('#pagin button:nth-child(2)').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the 2nd button
</script>
You can do this with CSS like this :
As you are already using inline css you can do this
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;background-image: url("yourimage.png");">';
$config['prev_tag_close']='</button>';
However i would suggest adding a new class and giving css property to that class.
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" class="pg-prev">';
$config['prev_tag_close']='</button>';
CSS FILE
.pg-prev{
border-radius:5px;
background-image: url("yourimage.png");
}
It's okay, I found a way:
$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';
This works perfect, thank you guys for your interest.
I need to draw text in top of the image this the look like
when the page load i need to display price in side the photo.I try it like this
<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>
But it didn't work as i expected.how can i do this.if there is another easy way to this ?
Here is an example of using background-image within a div so that you can put more inside the div, ie)text
HTML:
<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
<h2 id='price'>Price: $10</h2>
</div>
CSS:
#image {
width:243px;
height:163px;
background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}
check it out here
Add a z-index value to the <img> and the <h2>. For example, z-index:98 on the <img>, and z-index:99 for the <h2>. (A higher value because you want it on top).
I would also recommend moving all styles to a css file, rather than use the inline style attribute.
I am rendering with php some amount of images, but also i render the a href="" - the images area changing when they are fading, but the url are the same.
How can I change the url and the image together?
JQuery Cycle
The jquery Cycle plugin can cycle any any elment. So the easy way to do this is to just wrap each image with a hyperlink:
http://jsfiddle.net/lucuma/MV9S5/
<div id="slideshow">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
$('#slideshow').cycle();
Additionally you can use your slide attributes if perhaps you have a title you want updated that is outside of the sliders. You'd use the after event. The following code updates the h1's hyperlink after each slide changes. It sets the text to be the title of the img on the slide. Because my images are wrapped in a hyperlink, I need this line var $cur = $('img', currSlideElement) to get to the img element of the slide.
Demo: http://jsfiddle.net/lucuma/dsK9S/2/
<h1 id="title"></h1>
<div id="slideshow">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
$('#slideshow').cycle({
after:function(currSlideElement, nextSlideElement, options, forwardFlag) {
var $cur = $('img',currSlideElement);
$('#title a').text($cur.attr('title'));
$('#title a').attr('href',$cur.attr('src')).text();
}
});
jQuery solution:
$(yourImage).attr('src', 'newImageUrl');
If you are trying to implement a slider. Try nivo.
i have some images in an un ordered list.
<ul>
<li id='chain'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/chain.jpg" alt="" width="550" height="440" />
</a>
</li>
<li id='grips'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/grips.jpg" alt="" width="275" height="440" />
</a>
</li>
<li id='tires'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/tires.jpg" alt="" width="175" height="220" />
</a>
</li>
</ul>
i need css that will give the span and div in each set the same width like this expressed in a loop, NOT hand written every item
#chain .fade, #chain .title {width:550px}
#grips .fade, #grips .title {width:275px}
#tires .fade, #tires .title {width:175px;}
question: could i dynamically create css using jQuery? if not how can i create this css and assign the width value using PHP?the list items will change often and i wish to use a loop or .each statement.
in other words i dont want to make a list of each item
is there a way to pull the li ID and the IMG dimension and dynamically create css
pseudo code:
var w = $('ul li').each(find img width).assign it to> .css(this .fade, this .title {width:w + "px"});
or
should i look into php to echo the output of each ul li IMG?
jQuery easily allows you to create inline CSS styles (styles that are applied to each element).
$('#chain, #grips, #tires').each(function(index, element){
$('.fade', element).width( $('img', element).width() );
});
Here is what this script is doing
.each() iterates over all the selected elements. index, as the name suggests, is the index of the array being iterated over. element is the current element being iterated over.
$('.fade', element) this looks for the class of fade within the element.
.width() will either get or set the width of an element. It will be set if a parameter is passed into it, example: .width(15). (This will set the width of the element to 15 pixels wide.) It retrieves the width of an element if nothing is passed into it, example: .width().
$('img', element).width() retrieves the width of the img tag inside the element. Because this value is being passed into $('.fade', element).width(), it will set elements with the class of fade to width of the img.
This is how to do it with jQuery:
$('li').each(function(){
var $li = $(this);
var $img = $li.find('img');
var width = $img.attr('width');
$li.find('.fade, .title').css('width', width + 'px');
});
Or get rid of the jQuery, and use just css:
li { float: left; clear: left; }
http://jsfiddle.net/u2HNx/2/
ok, try this:
$('li').each(function(){
var width = $(this).find('IMG').width();
$(this).find('.fade').width(width);
$(this).find('.title').width(width);
});
$("#chain .fade,#chain .title").css('width','550px');