www.webdeveloper.com
Results 1 to 2 of 2

Thread: JQuery Gallery

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    JQuery Gallery

    Hi, All

    I am a web developer developing my first html site.I have run into problems with jquery gallery called Gallerific.I have followed instructions on where to insert the tags but still cannot get it to work properly..

    The code is as follows...

    HTML Code:
    <!-- Created by ysbnet.in business card tool, http://hostedapps.ysbnet.in/businesscard -->
    <html  xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Welcome to INARCH9</title>
    <link type="text/css" href="../css/styles.css" rel="stylesheet"/>
    <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="../scripts/jquery-1.3.2.js"></script>
    		<script type="text/javascript" src="../scripts/jquery.galleriffic.js"></script>
    		<script type="text/javascript" src="../scripts/jquery.opacityrollover.js"></script>
    <!--h1{margin-bottom:0px;font-size:30px;} -->
    <!--This puts border under h1(border-bottom:1px solid black;)) -->
    <!--This code (padding:0;margin:0;clear:both;) puts space between between Top menu and h1 -->
    </head>
    <body>
    <div id="wrapper">
    <h1><a id="shortcut" href="index.html">INARCH9</a></h1>
    <!-- Top Menu starts -->
    <nav>
    <ul>
     <li><a href="index.html" alt="Page Not Found" >Home</a></li>
        <li><a href="Projects.html" alt="Page Not Found">Projects</a></li>
        <li><a href="Gallery.html" alt="Page Not Found" class="current">Gallery</a></li>
        <li><a href="About.html" alt="Page Not Found">About Us</a></li>
        <li><a href="Contact.html" alt="Page Not Found">Contact Us</a></li>
        </ul>
     </nav>
    <img src="http://ysbnet.in/hostedapps/header/real_estate.png" alt="Not Available"/>
    <!--Content starts here -->
    <div id="page">
    			<div id="container">
    				<h1><a href="index.html">Galleriffic</a></h1>
    				<h2>Thumbnail rollover effects and slideshow crossfades</h2>
    
    				<!-- Start Advanced Gallery Html Containers -->
    				<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 style="clear: both;"></div>
    			</div>
    		</div>
    </div>
    
    <div id="footer">Copyright &copy; 2012 INARCH9. All rights reserved.</div>
    </div>
    		<script type="text/javascript">
    			jQuery(document).ready(function($) {
    				
    				// We only want these styles applied when javascript is enabled
    				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
    				$('div.content').css('display', 'block');
    
    				// Initially set opacity on thumbs and add
    				// additional styling for hover effect on thumbs
    				var onMouseOutOpacity = 0.67;
    				$('#thumbs ul.thumbs li').opacityrollover({
    					mouseOutOpacity:   onMouseOutOpacity,
    					mouseOverOpacity:  1.0,
    					fadeSpeed:         'fast',
    					exemptionSelector: '.selected'
    				});
    				
    				// Initialize Advanced Galleriffic Gallery
    				var gallery = $('#thumbs').galleriffic({
    					delay:                     2500,
    					numThumbs:                 15,
    					preloadAhead:              10,
    					enableTopPager:            true,
    					enableBottomPager:         true,
    					maxPagesToShow:            7,
    					imageContainerSel:         '#slideshow',
    					controlsContainerSel:      '#controls',
    					captionContainerSel:       '#caption',
    					loadingContainerSel:       '#loading',
    					renderSSControls:          true,
    					renderNavControls:         true,
    					playLinkText:              'Play Slideshow',
    					pauseLinkText:             'Pause Slideshow',
    					prevLinkText:              '&lsaquo; Previous Photo',
    					nextLinkText:              'Next Photo &rsaquo;',
    					nextPageLinkText:          'Next &rsaquo;',
    					prevPageLinkText:          '&lsaquo; Prev',
    					enableHistory:             false,
    					autoStart:                 false,
    					syncTransitions:           true,
    					defaultTransitionDuration: 900,
    					onSlideChange:             function(prevIndex, nextIndex) {
    						// 'this' refers to the gallery, which is an extension of $('#thumbs')
    						this.find('ul.thumbs').children()
    							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    							.eq(nextIndex).fadeTo('fast', 1.0);
    					},
    					onPageTransitionOut:       function(callback) {
    						this.fadeTo('fast', 0.0, callback);
    					},
    					onPageTransitionIn:        function() {
    						this.fadeTo('fast', 1.0);
    					}
    				});
    			});
    		</script>
    
    </body>
    </html>
    This is my css...
    Code:
    @charset "utf-8";
    
    
    /*---------------------------------------------------------------------------------------------*/
    
    /*index.html starts*/
    nav{
    	background:#151B54;
    	height:2.3em;
    }
    ul,li {
    	
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	
    }
    
    ul{
    	background:#151B8D;
    	height:2em;
    	width:100%;
    }
    li a{
    	display:inline-block;
    	line-height:2em;
    	padding:0 3.16em;
    	font:Arial;
    	color:white;
    	text-decoration:none;
    }
    
    li a:hover{
    	background:#151B54;
    	height:2em;
    	padding-left:3.16em;
    	padding-right:3.16em;
    	padding-top:.3em;
    	position:relative;
    	top:-.3em;
    	border-radius:.3em .3em 0 0;
    	
    	
    }
    .current,a:hover.current{
    	background:#6D7B8D;
    	color:#eee;
    	padding-top:.3em;
    	padding-left:3.173em;
    	padding-right:3.173em;
    	position:relative;
    	top:-.3em;
    	border-radius:.3em .3em 0 0;
    	border-bottom:.3em solid #806D7E;
    }
    img{
    	font-size:8px;
        display: block;
    	margin-left:auto;
    	margin-right:auto;
    	max-width:800px;
    }	
    a{text-decoration:none;}
    
    .fluid_container {
    			margin: 0 auto;
    			max-width: 1000px;
    			width: 90%;
    }
    
    /*index.html ends*/
    
    /*gallery.html starts*/
    body {color:#000080;font:normal 16px Georgia,Verdana,Arial,san-serif;background-image:url(../images/bgimage.jpg); 
    		background-color:white;}
    #wrapper{width:800px;text-align:center; border:0px;padding:0;margin: 0 auto;}
    h1{font-weight:bold;font-size:30px;margin-bottom:0px;padding:0;margin:0;clear:both;}
    h2{margin-top:0px;}
    img{font-size:8px;width:796px;margin-bottom:0px;padding:0;margin:0;clear:both;}
    /*img{font-size:8px;width:796px;margin-bottom:0px;padding:0;margin:0;clear:both;align:center;}*/
    #footer {position: relative;
    	border-top:1px solid black;
    	text-align:center;
    	margin-top: 330px; /* negative value of footer height */
    	height: -330px;
    	clear:both;} 
    a{text-decoration:none;}
    h2{border-bottom:1px solid black;}
    #shortcut:visited{color:#000080;}
    /*gallery.html ends*/
    
    
    /*contact.html addition styles*/
    
    #name h3{margin-top:0px;}
    h3{font-weight:bold;}
    a.text{color:#000080;}
    h3, p.text, p.firstLine{
        display: inline;
        vertical-align: top;
        line-height: 28px;
    }
    p.secondLine{margin-left:91px;margin-top:0px;margin-bottom:2px}
    p.thirdLine{margin-left:91px;margin-top:0px;margin-bottom:0px}
    
    
    #images{
    width: 960px;
    height: auto;
    overflow: hidden;
    }
    #images img {
    display: inline;
    margin: 0 10px

  2. #2
    Join Date
    Sep 2013
    Posts
    221
    Well you have posted twice for this problem. So, that means you are really spending tough time with this.
    i think you must follow the below instruction for your Jquery gallery from the below link:

    http://wowslider.com/rq/jquery-images-slider-in-dreamweaver-R.html
    strad solutionswww.stradsolutions.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles