Hello,
I am trying to create a page with link like such:
page.php
<a href="#1">pic1</a>
<a href="#2">pic2</a>
the first page willbe page.php#1 and the second one will be page.php#2
In order to activate page 2 what file name should I create for page.php#2?
It has to be a different page from page.php#1
Am I able to create a page called page.php#2?
Thanks.
What did you type in this with page.php#1 and page.php#2 those are HTML anchors, which you can use to jump on the same page.
What you need is page.php?pic=1, page.php?pic=2 and so on...
So does it mean using the same file or different file name?
It should be like an image gallery. So whenever someone click on the thumbnail the large picture in the center changes, I shouldn't see the second picture until someone click on the next thumbnail.
you can't really make a gallery like your talking about with PHP, at least I think. you need ajax or JS or the page will reload and jump around which is a poor design for a gallery. And far as the page.php?pic=2 can be almost anything you want it to be. Id's for queries and such or a pic but then you need code to choose and load the pic. Jquery would be good for a gallery. There are many plug-ins and has classess dedicated to ajax
You can use Apache mod rewrite to allow this type of thing (I think) in the url, but it's not a standard pattern that I've seen.
A better one IMO, would be
www.example.com/page/pics/1/
www.example.com/page/pics/2/
Your srcs are easy:
<img src="/page/pics/<?php echo $pic_id;?>/" ... />
Or any multitude of variations.
This could translate to www.example.com/page/pics/1/ = www.example.com/page.php?pics=1
Use Jquery ..
Try this ..
Exg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="#page1" class="link" rel="1">pic1</a>
<a href="#page2" class="link" rel="2">pic2</a>
<div class="Page page1" style="display: none;">
<h1>Gallery-1</h1>
</div>
<div class="Page page2" style="display: none;">
<h1>Gallery-2</h1>
</div>
<script type="text/javascript">
$(function(){
$('.link').click(function() {
var divIndex = $(this).attr('rel');
$('.Page').fadeOut();
$('.page'+divIndex).fadeIn();
});
});
</script>
</body>
</html>
Hmm.. it looks neat. It just the pic gallery move downward then come back upward when you click it.
Mine looks the same, is there anyway so that the pic gallery remains in place in the middle of switching?
Change this
$('.Page').fadeOut();
$('.page'+divIndex).fadeIn();
To
$('.Page').hide();
$('.page'+divIndex).show();
good one. Is there any way to make whenever it just start the page it automatically select the first option?
change this
<div class="Page page1" style="display: none;">
<h1>Gallery-1</h1>
</div>
To
<div class="Page page1" style="display: block;">
<h1>Gallery-1</h1>
</div>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.