I'm pretty new to jQuery so I'm probably doing something really wrong but the next and buck link buttons I made fail to trip the $('#largeImage img').attr('src', picture_list[ active_index ] ) script I placed into their .click functions. Instead the result is that the #largeImage div ends up being hidden again. I've tried everything from adding a .preventDefault() to the script to ensure that the links (which have no target) aren't trying to randomly go elsewhere. I've also output most my variables to ensure that they are in fact being set properly within the html code. From all that I've read about the .attr function this script should be working. PHP source:
function gallery() //displays only the first l2 photos in the database. fix it when i figure a workaround for printing all of the thumbnails.
{
try
{
$album_id = $_GET['id'] ;
$db = honneyconnect( ) ;
if( mysqli_connect_error() )
{
throw new Exception( "Could not connect to the database") ;
}
$query = 'select * from albums where album_id="'.$album_id.'"' ;
$albums = $db->query( $query) ;
$album_name = $albums->fetch_row();
$default_pic = $album_name[1].'/'.$album_name[2] ;
$albums->free();
$query = 'select * from photos where album_id="'.$album_id.'"' ;
$photos = $db->query( $query ) ;
if( !$photos )
{
throw new Exception( "Query returned zero results." ) ;
}
else
{
$number_of_photos = $photos->num_rows ;
echo "<script type='text/javascript'> array_size = ".$number_of_photos." ;</script>" ; //figure out the size of the javascript array of photo sources
echo "<script type='text/javascript'> var picture_list = new Array( array_size ) ;</script>" ; //define the array
echo "<div id='largeImage'><a class='back' href=''><<</a><img src='".$default_pic."' ><a class='next' href=''>>></a></div>";
echo "<div id='gallery'>" ;
echo "<div id='thumbpanel'>" ;
if( $number_of_photos > 12 )
{
$stop = 12 ;
}
else
{
$stop = $number_of_photos ;
}
for( $i = 0; $i < 12 ; $i++ )
{
$row = $photos->fetch_row() ;
if( !$row )
{
$i = 12 ;
}
else
{
$file_path = $album_name[1]."/".$row[2] ; //provides the path for the image source
echo "<img value='".$i."' src='".$file_path."'>" ; //assigns the value for use in the jQuery scripts
echo "<script type='text/javascript'> picture_list[ ".$i." ] = '".$file_path."'</script>" ; //sends the values to the jQuery script
}
}
echo "</div></div>" ;
}
$photos->free();
$db->close();
}
catch( Exception $error )
{
echo $error ;
}
}
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next').click(function(){
active_index = active_index + 1 ;
if( active_index >= array_size )
{
$(this).hide() ;
}
if( active_index > 0 )
{
$('.back').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
});
$('.back').click(function(){
active_index = active_index - 1 ;
if( active_index <= 0 )
{
$(this).hide() ;
}
if( active_index < array_size )
{
$('.next').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
}) ;
$('.close').click(function{
$('#largeImage').hide() ;
}) ;
});
</script>
</head>
<body>
<?php
require( 'function.php' );
draw_masthead();
gallery();
?>
</body>
</html>
The following is the html result page
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
var source_image ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage img').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next a').click(function( event ){
event.preventDefault() ;
active_index = active_index + 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
});
$('.back a').click(function( event ){
event.preventDefault() ;
active_index = active_index - 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
}) ;
});
</script>
</head>
<body>
<div id="container">
<div class="photobanner">
<img class="first" src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
<img src="honeys/Image5.jpg" alt="">
<img src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
</div>
</div><div id="titlebar">HELL'S CANYON HONEYS ROLLER DERBY</div>
<div id="nav">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="#">Events</a>
<ul class="eventnav">
<li><a href="community.php">Community</a></li>
<li><a href="bouts.php">Bouts</a></li>
</ul>
</li>
<li>
<a href="#">The Team</a>
<ul>
<li><a href="roster.php">Roster</a></li>
<li><a href="albums.php">Albums</a></li>
</ul>
</li>
<li>
<a href="sponsors.php">Sponsors</a>
</li>
<li>
<a href="social.php">Contact Us</a>
</li>
</ul>
</div>
<div id="controlpanel">
<ul>
<li>
<a href="rosteredit.php">Edit Roster</a>
</li>
<li>
<a href="albums.php">Edit Albums</a>
</li>
<li>
<a href="editevents.php">Edit Events</a>
</li>
<li>
<a href="editnews.php">Edit News</a>
</li>
<li>
<a href="editsponsors.php">Edit Sponsors</a>
</li>
<li>
<a href="editcontact.php">Edit Contact Info</a>
</li>
<li>
<a href="clearsession.php">Log Out</a>
</li>
</ul>
</div><script type='text/javascript'> array_size = 4 ;</script><script type='text/javascript'> var picture_list = new Array( array_size ) ;</script><div id='largeImage'><a class='back' href=''><<</a><img src='rosterpics/Image3.jpg' ><a class='next' href=''>>></a></div><div id='gallery'><div id='thumbpanel'><img value='0' src='rosterpics/image2.jpg'><script type='text/javascript'> picture_list[ 0 ] = 'rosterpics/image2.jpg'</script><img value='1' src='rosterpics/Image3.jpg'><script type='text/javascript'> picture_list[ 1 ] = 'rosterpics/Image3.jpg'</script><img value='2' src='rosterpics/Image4.jpg'><script type='text/javascript'> picture_list[ 2 ] = 'rosterpics/Image4.jpg'</script><img value='3' src='rosterpics/Image5.jpg'><script type='text/javascript'> picture_list[ 3 ] = 'rosterpics/Image5.jpg'</script></div></div><br>
<script type='text/javascript'>
document.write( picture_list[1] ) ;
document.write( picture_list[2] ) ;
document.write( picture_list[0] ) ;
</script>
</body>
</html>
Just looking to get the next and back buttons to work as intended. Thank you in advanced for any help. Please don't hesitate to call me on my stupid mistakes as I know I'm screwing up somewhere I'm just not sure where.
I'm pretty new to jQuery so I'm probably doing something really wrong but the next and buck link buttons I made fail to trip the $('#largeImage img').attr('src', picture_list[ active_index ] ) script I placed into their .click functions. Instead the result is that the #largeImage div ends up being hidden again. I've tried everything from adding a .preventDefault() to the script to ensure that the links (which have no target) aren't trying to randomly go elsewhere. I've also output most my variables to ensure that they are in fact being set properly within the html code. From all that I've read about the .attr function this script should be working. PHP source:
function gallery() //displays only the first l2 photos in the database. fix it when i figure a workaround for printing all of the thumbnails.
{
try
{
$album_id = $_GET['id'] ;
$db = honneyconnect( ) ;
if( mysqli_connect_error() )
{
throw new Exception( "Could not connect to the database") ;
}
$query = 'select * from albums where album_id="'.$album_id.'"' ;
$albums = $db->query( $query) ;
$album_name = $albums->fetch_row();
$default_pic = $album_name[1].'/'.$album_name[2] ;
$albums->free();
$query = 'select * from photos where album_id="'.$album_id.'"' ;
$photos = $db->query( $query ) ;
if( !$photos )
{
throw new Exception( "Query returned zero results." ) ;
}
else
{
$number_of_photos = $photos->num_rows ;
echo "<script type='text/javascript'> array_size = ".$number_of_photos." ;</script>" ; //figure out the size of the javascript array of photo sources
echo "<script type='text/javascript'> var picture_list = new Array( array_size ) ;</script>" ; //define the array
echo "<div id='largeImage'><a class='back' href=''><<</a><img src='".$default_pic."' ><a class='next' href=''>>></a></div>";
echo "<div id='gallery'>" ;
echo "<div id='thumbpanel'>" ;
if( $number_of_photos > 12 )
{
$stop = 12 ;
}
else
{
$stop = $number_of_photos ;
}
for( $i = 0; $i < 12 ; $i++ )
{
$row = $photos->fetch_row() ;
if( !$row )
{
$i = 12 ;
}
else
{
$file_path = $album_name[1]."/".$row[2] ; //provides the path for the image source
echo "<img value='".$i."' src='".$file_path."'>" ; //assigns the value for use in the jQuery scripts
echo "<script type='text/javascript'> picture_list[ ".$i." ] = '".$file_path."'</script>" ; //sends the values to the jQuery script
}
}
echo "</div></div>" ;
}
$photos->free();
$db->close();
}
catch( Exception $error )
{
echo $error ;
}
}
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next').click(function(){
active_index = active_index + 1 ;
if( active_index >= array_size )
{
$(this).hide() ;
}
if( active_index > 0 )
{
$('.back').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
});
$('.back').click(function(){
active_index = active_index - 1 ;
if( active_index <= 0 )
{
$(this).hide() ;
}
if( active_index < array_size )
{
$('.next').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
}) ;
$('.close').click(function{
$('#largeImage').hide() ;
}) ;
});
</script>
</head>
<body>
<?php
require( 'function.php' );
draw_masthead();
gallery();
?>
</body>
</html>
The following is the html result page
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
var source_image ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage img').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next a').click(function( event ){
event.preventDefault() ;
active_index = active_index + 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
});
$('.back a').click(function( event ){
event.preventDefault() ;
active_index = active_index - 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
}) ;
});
</script>
</head>
<body>
<div id="container">
<div class="photobanner">
<img class="first" src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
<img src="honeys/Image5.jpg" alt="">
<img src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
</div>
</div><div id="titlebar">HELL'S CANYON HONEYS ROLLER DERBY</div>
<div id="nav">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="#">Events</a>
<ul class="eventnav">
<li><a href="community.php">Community</a></li>
<li><a href="bouts.php">Bouts</a></li>
</ul>
</li>
<li>
<a href="#">The Team</a>
<ul>
<li><a href="roster.php">Roster</a></li>
<li><a href="albums.php">Albums</a></li>
</ul>
</li>
<li>
<a href="sponsors.php">Sponsors</a>
</li>
<li>
<a href="social.php">Contact Us</a>
</li>
</ul>
</div>
<div id="controlpanel">
<ul>
<li>
<a href="rosteredit.php">Edit Roster</a>
</li>
<li>
<a href="albums.php">Edit Albums</a>
</li>
<li>
<a href="editevents.php">Edit Events</a>
</li>
<li>
<a href="editnews.php">Edit News</a>
</li>
<li>
<a href="editsponsors.php">Edit Sponsors</a>
</li>
<li>
<a href="editcontact.php">Edit Contact Info</a>
</li>
<li>
<a href="clearsession.php">Log Out</a>
</li>
</ul>
</div><script type='text/javascript'> array_size = 4 ;</script><script type='text/javascript'> var picture_list = new Array( array_size ) ;</script><div id='largeImage'><a class='back' href=''><<</a><img src='rosterpics/Image3.jpg' ><a class='next' href=''>>></a></div><div id='gallery'><div id='thumbpanel'><img value='0' src='rosterpics/image2.jpg'><script type='text/javascript'> picture_list[ 0 ] = 'rosterpics/image2.jpg'</script><img value='1' src='rosterpics/Image3.jpg'><script type='text/javascript'> picture_list[ 1 ] = 'rosterpics/Image3.jpg'</script><img value='2' src='rosterpics/Image4.jpg'><script type='text/javascript'> picture_list[ 2 ] = 'rosterpics/Image4.jpg'</script><img value='3' src='rosterpics/Image5.jpg'><script type='text/javascript'> picture_list[ 3 ] = 'rosterpics/Image5.jpg'</script></div></div><br>
<script type='text/javascript'>
document.write( picture_list[1] ) ;
document.write( picture_list[2] ) ;
document.write( picture_list[0] ) ;
</script>
</body>
</html>
Just looking to get the next and back buttons to work as intended. Thank you in advanced for any help. Please don't hesitate to call me on my stupid mistakes as I know I'm screwing up somewhere I'm just not sure where.
Share Improve this question edited Feb 17, 2014 at 18:11 NoobWebDev asked Feb 17, 2014 at 17:32 NoobWebDevNoobWebDev 1611 gold badge1 silver badge15 bronze badges3 Answers
Reset to default 7you should do it like:
var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);
your code just replace the string value with a new one, and return it, it won't replace it in your actual src attribute.
Can you try
$('#largeImage').attr('src', picture_list[ active_index ]);
instead of
$('#largeImage img').attr('src', picture_list[ active_index ]);
Your method assumes the img tag is inside an element with an ID of "largeImage" like:
<div id="largeImage">
<img src="">
</div>
If you need to alter image src attribute, you need to use $(selector).attr('src','new value') call. Without the second argument - it only returns the value.
$('#largeImage').attr('src') returns the value, then you replace something in it.
No changes are being made to the original attribute value.