Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a Link on one page to open specific image in gallery

    Not sure if the title explains this well...

    Essentially I have a list of products in a simple grid on a page. Right now if you click a product, it brings you to another page with a jquery image gallery containing the products from the previous page. The gallery starts with the first product in the list. I want it to start with the product that was clicked on the previous page.

    I assume the way to do this is edit the jQuery but I am not sure.

    http://salminia.com/pbimported2/vita_frozen-grid.html

    here is my code for each page, including the jquery + gallery:

    Grid Page:

    Code:
    <html>
    	<head>
    		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    		<title>Vita | Frozen Food</title>
    		<link rel="stylesheet" href="css/basic.css" type="text/css" />
    		<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
    		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    		<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    		<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
    		<!-- We only want the thunbnails to display when javascript is disabled -->
    		<script type="text/javascript">
    			document.write('<style>.noscript { display: none; }</style>');
    		</script>
            <link rel="shortcut icon" href="favicon.ico" />
    	</head>
    	<body>
    	<div id="page">
            
        			<div id="header">
    
    				</div>
    			<div id="container">
    	<div id="menu">
    
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="catalog.html">Catalog</a></li>
    <li><a href="about.html">About Vita Pri Hagalil</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul> 
    <br>
    <a href="products.html">Products</a> | <a href="vita.html">Vita</a> | Frozen Food
    </div>
    
    <div>
    <img src="img/brands/vita.png">
    <br>
    <br>
    <center>
    <table width="100%" cellpadding="30">
    <tr>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i210180060.jpg" height="200">
    <br>
    i210180060
    </center>
    </td>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i220180060.jpg" height="200">
    <br>
    i220180060
    </a>
    </center>
    </td>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i222180060.jpg" height="200">
    <br>
    i222180060
    </a>
    </center>
    </td>
    </tr>
    <!-- row -->
    <tr>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i230180060.jpg" height="200">
    <br>
    i230180060
    </center>
    </td>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i231180060.jpg" height="200">
    <br>
    i231180060
    </a>
    </center>
    </td>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i232180060.jpg" height="200">
    <br>
    i232180060
    </a>
    </center>
    </td>
    </tr>
    <!-- row -->
    <tr>
    <td>
    <center>
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i250180060.jpg" height="200">
    <br>
    i250180060
    </center>
    </td>
    
    </tr>
    </table>
    </center>
    </div>
    				
    				<div style="clear: both;"></div>
    			</div>
    		</div>
    		<div id="footer">&copy; 2014 Prime Brand Imports</div>
    	</body>
    </html>
    Gallery Page:

    Code:
    <html>
    	<head>
    		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    		<title>Vita | Frozen Food</title>
    		<link rel="stylesheet" href="css/basic.css" type="text/css" />
    		<link rel="stylesheet" href="css/galleriffic-1.css" type="text/css" />
    		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    		<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
            <link rel="shortcut icon" href="favicon.ico" />
    	</head>
    	<body>
    	<div id="page">
            
        			<div id="header">
    
    				</div>
    			<div id="container">
    			
    <div id="menu">
    
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="catalog.html">Catalog</a></li>
    <li><a href="about.html">About Vita Pri Hagalil</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul> 
    <br>
    <a href="products.html">Products</a> | <a href="vita.html">Vita</a> | <a href="vita_frozen-grid.html">Frozen Food</a> | Detail
    </div>
    				<div id="gallery" class="content">
    					<div id="controls" class="controls"></div>
    					<div class="slideshow-container">
    						<div id="loading" class="loader"></div>
    						<div id="slideshow" class="slideshow"></div>
    					</div>
    					<div id="caption" class="caption-container"></div>
    				</div>
    				<div id="thumbs" class="navigation">
    					<ul class="thumbs noscript">
    						   <li>
    								<a class="thumb" name="i210180060" href="vita/retail/frozen/i210180060.jpg" title="Title #0">i210180060</a>
    							<div class="caption">
    								<div class="image-title">i210180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                             <li>
    								<a class="thumb" name="i220180060" href="vita/retail/frozen/i220180060.jpg" title="Title #0">i220180060</a>
    							<div class="caption">
    								<div class="image-title">i220180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                            <li>
    								<a class="thumb" name="i222180060" href="vita/retail/frozen/i222180060.jpg" title="Title #0">i222180060</a>
    							<div class="caption">
    								<div class="image-title">i222180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                            <li>
    								<a class="thumb" name="i230180060" href="vita/retail/frozen/i230180060.jpg" title="Title #0">i230180060</a>
    							<div class="caption">
    								<div class="image-title">i230180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                            <li>
    								<a class="thumb" name="i231180060" href="vita/retail/frozen/i231180060.jpg" title="Title #0">i231180060</a>
    							<div class="caption">
    								<div class="image-title">i231180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                                 <li>
    								<a class="thumb" name="i232180060" href="vita/retail/frozen/i232180060.jpg" title="Title #0">i232180060</a>
    							<div class="caption">
    								<div class="image-title">i232180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
                                  <li>
    								<a class="thumb" name="i250180060" href="vita/retail/frozen/i250180060.jpg" title="Title #0">i250180060</a>
    							<div class="caption">
    								<div class="image-title">i250180060</div>
    								<div class="image-desc">Description</div>
    							</div>
    						</li>
    					</ul>
    				</div>
    				<!-- End Minimal Gallery Html Containers -->
    				<div style="clear: both;"></div>
    			</div>
    		</div>
    		<div id="footer">&copy; 2014 Prime Brand Imports</div>
    		<script type="text/javascript">
    			// We only want these styles applied when javascript is enabled
    			$('div.navigation').css({'width' : '300px', 'float' : 'left'});
    			$('div.content').css('display', 'block');
    
    			$(document).ready(function() {				
    				// Initialize Minimal Galleriffic Gallery
    				$('#thumbs').galleriffic({
    					imageContainerSel:      '#slideshow',
    					controlsContainerSel:   '#controls',
    					captionContainerSel:       '#caption'
    				});
    			});
    		</script>
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,678
    Thanks
    25
    Thanked 654 Times in 653 Posts
    My question to you is why do it this way? From the looks of things all your images link to
    Code:
    <a href="vita_frozen.html"><img src="vita/retail/frozen/i210180060.jpg" height="200">
    vita_frozen.html.

    Where you display the same things again and need the use to click on the link to go to
    Code:
    <a class="thumb" name="i210180060" href="vita/retail/frozen/i210180060.jpg" title="Title #0">i210180060</a>
    and vita/retail/frozen/i210180060.jpg looks like it is a page with only one item. (My guess)

    Why not go to vita/retail/frozen/i210180060.jpg from the first page?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •