Slideshow og navigasjon

Kaan

Medlem
Hei.

Forrige tråden min lå i feil forum så jeg spør igjen og har et spørsmål til.

1: Jeg driver og lager en nettside til en venn av meg som driver et sportsnyhetsside på persisk. Og jeg har da et spørsmål.

صÙحه ورزشی - مشرق نیوز | mashreghnews.ir

På denne siden så ser dere en sånn slideshow med bilde av alle ligaene. Jeg bruker Wordpress og lurte på om det finnes en slik plugin for det. Any suggestions?

2: På www.football-reports.com så ser dere en grønn navigasjonsbar. Hvordan kan jeg endre rekkefølgen eller slette ting derifra?

Tusen takk!
 

adeneo

Medlem
Det må da finnes tusenvis av slike slideshow plugins, og de er så enkle å snekre sammen at de fleste kan klare det selv dersom de prøver.

Wow slider er en av de bedre slider'ene.

Menyen ser ut til å være "mainmenu" menyen i wordpress, og den endrer du vel i admin panelet i Wordpress, under "utseende -> menyer ".
 

hansson

Langveisfarende
Under demoen på flexslider-siden ser du hva du må putte inn i koden av html og javascript. Html-en putter du inn i koden like under den eksisterende slideren. Javascriptet putter du inn i head-området i header.php. I tillegg må du putte inn en lenke til selve flexslider.js og jquery i head-området i denne filen. Hvis du ser på kildekoden på demo-siden vil du se hvordan dette gjøres. Jquery henter du fra en lenke hos google, mens flexslider.js laster du opp på serveren din. Lenka i head må altså treffe denne filen for at dette skal virke.
 

Kaan

Medlem
Prøvde, men den vil ikke vise seg..

På top.php har jeg dette:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>

<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>

Og på slutten av top.php før starten av content satt jeg inn dette:
<br />
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
<br />

Jeg har satt inn alle filene fra demoen til min egen side slik at det samme resultatet som på demoen kommer opp.
Hva har jeg gjort feil? :(

Tusen takk!
 

adeneo

Medlem
Javascriptet putter du inn i head-området i header.php. I tillegg må du putte inn en lenke til selve flexslider.js og jquery i head-området i denne filen. Hvis du ser på kildekoden på demo-siden vil du se hvordan dette gjøres. Jquery henter du fra en lenke hos google, mens flexslider.js laster du opp på serveren din. Lenka i head må altså treffe denne filen for at dette skal virke.

Jeg trodde man gjorde dette i Wordpress slik:

PHP:
wp_enqueue_script( 'flexslider', dirname(__FILE__) . '/js/flexslider.js', array('jquery') );

eller i en plugin kan man gjerne bruke:

PHP:
wp_enqueue_script( 'flexslider', plugins_url('flexslider.css', __FILE__), array('jquery') );

Dette autolaster jQuery i wordpress, og sikrer at flexslider kommer etter jQuery, og det er den rette måten å laste inn javascript på, selv om det selvfølgelig funker å bare klippe og lime inn en lenke til Google også?

Husk på at jQuery er i noconflict mode i wordpress.

Det betyr at

PHP:
$(function(){
   // kode her
});

ikke virker, mens:

PHP:
jQuery(function($){
   // kode her
});

vil virke!

EDIT:

og bruk aldri lenken:

Kode:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

angi alltid versjonsnummeret på jQuery i CDN lenker, ellers caches ikke scriptet:

Kode:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
Sist redigert:

Kaan

Medlem
Okay, så som en nybegynner innen web så har jeg forstått det slik(?):

<?php global $SMTheme;
if (preg_match('/mobi/i', $_SERVER['HTTP_USER_AGENT'])) echo '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">'."\r\n";
else echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">'."\r\n";
?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>

<script type="text/javascript">
jQuery(function($){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>

Den vil fortsatt ikke vises.
 

hansson

Langveisfarende
Har du sjekket at alle scriptene faktisk laster og at ingen av url-ene dine her peker til steder der det ikke er noe script? Gå gjennom kilden og klikk på lenkene og se om du får frem js-kodene (hvis du ikke vil bruke firebug til å sjekke slikt).

SyntaxHighlighter, hvor kommer den fra? Noe som er kopiert med inn fra nettstedet til flexslider? Tror ikke det skal være med ihvertfall.

Du henter også inn jquery to ganger, og flexslider.js to ganger. Dette ser ut til å være til overs (men mulig du får problemer i IE hvis du ikke har med defer-varianten av sliderscriptet. Du skal kunne klare deg med en av de) :

Kode:
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>
 

adeneo

Medlem
Nå er det jo slik at Flexslider i dag tilhører Woo themes, og kommer ferdig som en wordpress plugin, Wooslider, for den nette sum av 29 dolares. Er ikke umulig at det er verd noen tiere for bare å banke den inn i plugin mappen og sette opp alt i admin panelet ditt.
 

Kaan

Medlem
Beklager for at jeg ikke er så flink, og beklager for maset jeg har gitt dere. Samt deres tid jeg har brukt. Kan punge ut med 50 kroner for at noen setter det inn på nettsiden min. Interressert? PM meg .. :)


Men:
<?php global $SMTheme;
if (preg_match('/mobi/i', $_SERVER['HTTP_USER_AGENT'])) echo '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">'."\r\n";
else echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">'."\r\n";
?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="flexslider.css" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>

<?php
$SMTheme->show_title();

?>

<?php

if(
(is_archive()&&is_day()&&$SMTheme->get( 'seo', 'day' ))||
(is_archive()&&is_month()&&$SMTheme->get( 'seo', 'month' ))||
(is_archive()&&is_year()&&$SMTheme->get( 'seo', 'year' ))||
(is_category()&&$SMTheme->get( 'seo', 'category' ))||
(is_tag()&&$SMTheme->get( 'seo', 'tag' ))||
(is_author()&&$SMTheme->get( 'seo', 'author' ))||
(is_search()&&$SMTheme->get( 'seo', 'search' ))
) {
?><meta name="robots" content="noindex" /><?php
}

?>

<?php if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>

<?php wp_head(); ?>

<style type="text/css">
<?php echo $SMTheme->get( 'integration','css' )?>
</style>
<?php
echo $SMTheme->get( 'integration','headcode' );
?>
<script type="text/javascript">
jQuery(document).ready(function() {

<?php
$SMTheme->block_slider_config();
?>
jQuery(".menus .children").addClass('sub-menu');

<?php
$SMTheme->block_menu_config("menus");
?>
jQuery('textarea#comment').each(function(){
jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>');
});
jQuery('.feedback input').each(function(){
jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>['+jQuery(this).attr('name')+']');
});
jQuery('.feedback textarea').each(function(){
jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>['+jQuery(this).attr('name')+']');
});
});
</script>
</head>
<body <?php
$class=$SMTheme->block_slider_css();
$class.=' '.$SMTheme->sidebars_type;
body_class( $class );
?> layout='<?php echo $SMTheme->layout; ?>'>
<div id='scrollUp'><img src='<?php echo get_template_directory_uri().'/images/smt/arrow-up.png';?>' alt='Up' title='Scroll window up' /></div>
<div id='all'>
<div id='header'>
<div class='container clearfix'>


<div id='secondarymenu-container'>
<div id="logo">
<?php $SMTheme->block_logo();?>
</div>

<div class="menusearch" title="">
<?php get_search_form(); ?>
</div>

<div id='menu-box'>
<div id='secondarymenu'>
<?php wp_nav_menu('depth=0&theme_location=sec-menu&container_class=menu-topmenu-container&menu_class=menus menu-topmenu&fallback_cb=block_sec_menu'); ?>
</div>
</div>

</div>


<?php smt_mobile_menu('sec-menu'); ?>
<?php smt_mobile_menu('main-menu'); ?>

<div id='mainmenu-container'>
<div id='mainmenu'>
<?php $nav_menu_params=array(
'depth'=>0,
'theme_location'=>'main-menu',
'menu_class'=>'menus menu-primary',
'fallback_cb'=>'block_main_menu'
);
wp_nav_menu($nav_menu_params); ?>
</div>
</div>
<?php
if ((is_front_page()&&$SMTheme->get( 'slider', 'homepage'))||(!is_front_page()&&$SMTheme->get( 'slider', 'innerpage'))) {?>
<div class='slider-container'>
<div class='slider-bgr'></div>
<?php $SMTheme->block_slider(); ?>
</div><?php
}?>




</div>
</div>
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="wp-content/themes/footballnet/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>

<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 7
});
});
</script>


<div id='content-top' class='container'></div>
<div id='content'>
<div class='container clearfix'>

slik ser top.php ut; men bildene vises i stoor størrelse og jsen kommer ikke..
 

hansson

Langveisfarende
Bruker den andre slideren som er der også flexslider? Kan være en konflikt der, evt. Kan dessverre ikke ta på meg denne jobben, men det blir enklere å hjelpe deg hvis du legger det ut på en testside på nettet så vi ser hva som skjer live.

Har du forsøkt å kutte den ene av de to linjene med jquery i head? Kuttet den ene av de to flexslider.js? Puttet scriptet som styrer slideren inn nederst i head-området? Slik det ligger nå laster du slideren etter bildene i den, og det fungerer neppe.
 
Topp