I had a PHP file that properly generates an image that I need. In my main page, there is a link named "View Image". So I put an < a href > tag in the "View Image" so that when it is clicked the image will load. However, when "View Image" was clicked, the whole page will load the image, which is not what I wanted. How will I code it in such a way that it will be just a part my page (e.g. just a small image within the site, not the whole webpage)?
Thanks!
Use an <img> tag to embed the image inside of the page.
<img src="path/to/img.png">
Instead of linking to it.
Try this
//HTML
Show Image
<div id="pre" >
<img src="img.jpg" />
</div>
//Javascript
<script type="text/javascript" >
document.getElementById("pre").style.display="none";
function disp()
{
if(document.getElementById("pre").style.display="none")
{
document.getElementById("pre").style.display="";
}
else
{
document.getElementById("pre").style.display="none";
}
return false;
}
</script>
Related
$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'm just wondering how social media website adds a link into there popups on there first image to load the next new image into the the same popup div.
I have the first image in my pop up and as you can see I tried using a different page to load in where all the functionality works.
<? if($user2_id==$_SESSION['id']){
$cover="SELECT coverphoto_id,coverphoto from coverphotos WHERE coverphoto_userid='$user1_id'";
$rescover=mysqli_query($mysqli,$cover) or die(mysqli_error($mysqli));
$rowcover=mysqli_fetch_assoc($rescover);
?>
<script>
function popup(){
$("#popUpDiv").load('include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
$("#blanket").show();
$("#popUpDiv").show();
}
</script>
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
<a href="#" onClick="popup('popUpDiv')" >X</a>
</div>
<a href="#" onClick="popup('popUpDiv')" ><div id="usercover" >
<? echo "<img id=\"coverimage\" border=\"0\" src='coverimages/".$rowcover['coverphoto']."?".time()."' width=\"600px\" onerror='this.src=\"coverimages/nocover.png\"' alt='onerror='this.style.height='300px'>";
?>
Problem I'm facing is that the previous and next links in the loaded page don't load the next new data inside the popup div, they navigate to the page.
`include/covermedia.userimage.php?pid=".$photo_prev['coverphoto_id']."'`
Is there any simple way I could achieve this.. even by not having to load a page into the popup?
if you're changing page locations, which it sounds like you are, put an iframe where you have the div (or inside your div) and change the iframe src to your new URL:
$("#popUpIFrame").attr('src','include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
Sorry in advance if it's a stupid question, but I'm a complete newbie and this is the first bit of PHP I've ever looked at in my life.
I've taken the code from this web post about Creating an image gallery from a folder of images automatically and it creates a gallery of thumbnails which, when clicked, open a larger image as a separate page.
What I would like is for the thumbnails to open the larger image inside a 'div' on the same page.
I've managed to achieve this by using 'iframe', but I'm aware that's a solution which is frowned upon:
<iframe id="r5-6c2-4" name="bigimg" src="" width="625px" height="410px" frameBorder="0">
</iframe>
<div id="r5-6c1">
<div id="thumbscontainer">
<ul>
<?php
$images = glob('g-images/*.jpg');
$ignore = array('cgi-bin', '.', '..','._');
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<li><a href='".$dirname.$curimg."' target='bigimg'><img src='thumby.php?src=".$dirname.$curimg."&h=193&zc=0' alt='' /></a></li>\n ";
}
}
?>
</ul>
</div>
</div>
Help please! :-)
I'm a newbie too but I'd try this,
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('body').append('<div><img id="moo" src=""></div>');
$("a[target='bigimg']").on('click',function(a){
a.preventDefault();
$('img#moo').attr('src',$(this).attr('href'));
});
});
</script>
I am creating a website that has an image gallery.
You have a side menu with the different categories, a hidden div that appears when you click on a category, filled with thumbnails, and when you click on any of the thumbnails it hides the thumbnails div and shows the image gallery in its place.
An example of what I am trying to do is here : http://www.matitacorp.com/web/portfolio.php
What I would like to do is when the thumbnail div hides and the image gallery appears I would also like the image that corresponds to the thumbnail clicked to appear, even if it is 3 or 4 pictures lower in the scrollable thumbnail gallery.
I've tried using .scrolltop() and setting the value but I think that I am missing something. My div's appear properly but I am not getting the scrolltop value to work or I am using the complete wrong function. Hopefully someone can help out.
Here is a piece of the code that I am trying to use:
//thumbnail section
<div id="booth">
<img src="thumb1" alt="" />
<img src="thumb2" alt="" />
<img src="thumb3" alt="" />
</div>
//main image section
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">
<div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">
<img src="mainImg1" /><br />
<img src="mainImg2" /><br />
<img src="mainImg3" /><br />
</div>
</div>
<script>
$("#identityoverlay").click(function () {
$("#identityOverlay").show();
$("#booth").hide();
});
$("#identityoverlayA").click(function () {
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
$("#identityOverlay").show();
$("#booth").hide();
});
</script>
Thanks!
Well you have couple problems with your code.
First of all you should prevent default action on click and secondly you should hide/show divs first and then scroll to wanted position.
Here is the modified code:
$("#identityoverlayA").click(function (e) {
e.preventDefault;
$("#booth").hide();
$("#identityOverlay").show();
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
});
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.