Beste FangorN,
Alvast heel erg bedankt voor je reactie. Ik ga het even op mijn gemak doornemen om vervolgens met je tips aan de slag te kunnen. Haha ja ik maak gebruik van PHP. Ik heb inmiddels een 2 index gemaakt een dubbele x omdat in mijn eerste mijn header location staat.
Edit misschien is het makkelijker als ik de desbetreffende website er ook bij post, zodat met een idee heeft wat ik verkeerd doe:
Goede middag heren,
Ik loop op dit moment vast met het maken van friendly urls. Op dit moment probeer ik via een .htaccess bestand friendly urls te maken door inplaats van mijn huidige urls: index.php?page=home het volgende te maken /home. Kortom ik wil dat index.php?page= niet meer weergegeven wordt. Nu staan er tal van tutorials online en heb ik al meerdere dingen geprobeerd echter veranderd er bij mij niets. Ik heb zelfs de tutorial van mijn hosting provider: "Pcextreme" gebruikt en dat veranderde ook niks. Wat doe ik fout?
RewriteEngine On
RewriteBase /
RewriteRule ^([a-zA-Z0-9]+)/$ index.php?page=$homeAlvast bedankt voor jullie tijd en moeite.
Ik ben op dit moment bezig om mijn jplayer aan te passen zodat ik met een while loop tracks kan laden uit de database echter komt ik er niet helemaal uit. Ik weet namelijk niet hoe ik de while loop maak als er een stuks javascript aan te pas komt. De scripts die ik heb staan hieronder:
Player Frontend:
<div class="players cf">
<div class="players-col players-col_left">
<div class="short-player cf">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single cf">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
</ul>
</div>
<div class="jp-details">
<ul>
<li><span class="jp-title"></span></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>Player Backend:
<script>
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "LMFAO - Party Rock Anthem ft. Lauren Bennett, GoonRock",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/js",
supplied: "m4a, oga"
});
/* End player 1 */
</script>Nu is mijn doel om het dynamische te maken via een whileloop maar ik loop vast op het javascript gedeelte:
<?php
$sql=mysql_query("SELECT * FROM tracks ORDER BY id DESC");
while($row=mysql_fetch_array($sql)){
$id = $row['id'];
$title = $row['title'];
$datetime = $row['datetime'];
$youtube = $row['youtube'];
$text = $row['text'];
$author = $row['author'];
$tags = $row['tags'];
?>Hopelijk kan iemand mij hier mee helpen want ik ben er 2 weken mee bezig en zit nog steeds met het zelfde probleem. Alvast bedankt voor de tijd en moeite. Ps misschien helpt dit: dit is de pagina waarom het gaat: Future House Music
Heey nog bedankt voor je reactie, echter had ik het al opgelost. Ik had namelijk mijn 2e ul element over het hoofd gezien in de css. Ik heb dit Voor de mensen die dit probleem ook hadden heb ik nu dit toegevoegd aan mijn css:
ul#navigation li:hover > ul
{
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
background:#f8f8f8;
box-shadow:1px 1px 3px #ccc;
opacity:0;
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:102px;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}Beste ICT Scripters,
Ik ben bezig met een website voor een bekende, nu moet ik in mijn responsive menu een dropdown maken, normaal gezien niet zo moeilijk maar ik ben er een behoorlijke tijd uitgeweest nu probeerde in door middel van visibility: hidden; dit te maken maar dat werkte niet.
Nu heb ik mijn wijzigingen in de css weer weghaald voor dit dropdown menu omdat dit niet werkten. Ik hoop dat iemand mij wil helpen, Alvast bedankt voor moeite.
Hieronder staat de code voor mijn navigatie en voor mijn css.
<nav class="nav">
<ul>
<li><a href="futurehouse.php" class="nav__item">Future House</a></li>
<li><a href="#" class="nav__item">Music</a>
<ul>
<li><a href="tracks.php" class="nav_sub_item">Tracks</a></li>
<li><a href="podcast.php" class="nav_sub_item">Podcast</a></li>
</ul>
</li>
<li><a href="artist.php" class="nav__item">Artists</a></li>
<li><a href="tour.php" class="nav__item">Events</a></li>
<li><a href="#" class="nav__item">Media</a>
<ul>
<li><a href="Photos.php" class="nav_sub_item">Photos</a></li>
<li><a href="videos.php" class="nav_sub_item">Videos</a></li>
</ul>
</li>
<li><a href="contact.php" class="nav__item">Contact</a></li>
</ul>
</nav>.nav {
float: right;
width: 68.7384044527%;
background: url(images/mainNavShadow.png) no-repeat top center;
margin-right: -35px;
position:relative;
}
.nav__item {
display: inline-block;
font: 1.5em "Dosis", sans-serif;
color: #ffffff;
margin-left: -4px;
padding: 4.453441% 4.38596491228% 5.5%;
border-left: 1px solid #050505;
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav__item:hover {
background: #151515;
color: #082f36;
}
.nav__item.nav__item_active {
background: #151515;
color: #082f36;
}
.btn-nav-toggle {
display: none;
width: 100%;
font: bold 1.33333333em "Dosis", sans-serif;
color: #082f36;
text-transform: uppercase;
padding: 1.30208333333%;
background: #000;
-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
.btn-nav-toggle:before {
content: "";
display: inline-block;
margin-right: 7px;
vertical-align: -3px;
width: 20px;
height: 20px;
background: url(images/responsive-nav-icon.png) no-repeat;
}Beste Ict scripters,
ik heb een script geschreven dat bestaat uit een while loop die plaatjes en de benodigde gegevens uit de database haalt en weergeeft.
Dit werkt goed, echter wil ik het nu zo maken dat op het moment dat er 5 regels weergegeven zijn met in iedere regel 5 plaatjes. dat er dan onderaan een knopje komt
pagina 1,2 enzv. Dus om het nog even kort samen te vatten op het moment dat er meer dan 15 afbeeldingen weergegeven worden moeten de eerst volgende afbeeldingen op pagina 2 komen. Om een beter idee te geven kunt u kijken op http://www.q-cast.nl/partners.php . Daar ziet u 3 rijen met in iedere rij 5 foto's en 1 rij met 1 foto. Nu is mijn doel om de rij met 1 plaatje op de volgende pagina te krijgen. Weet iemand hoe ik dit kan doen, want ik kom er helaas niet uit. Heb geprobeerd dit script : http://www.visual-blast.com/javascript/gal…hoto-galleries/ te combineren met mijn eigen script echter werd het daar niet beter van (onkunde).
Dit is het script dat ik nu gebruik:
<?php include'db_connect.php'; ?>
<?php
$sql=mysql_query("SELECT * FROM partners ORDER BY id");
while($row=mysql_fetch_array($sql)){
$link = $row['link'];
$naam = $row['naam'];
$afbeelding = $row['afbeelding'];
?>
<div class="r">
<div class="g g8 node node-sidebar-reference node-promoted node-teaser">
<a href="<?php echo $row['link']; ?>" class="box island"> <img src="ontwikkel_admin/images/logos/partners/<?php echo $row['afbeelding']; ?>" alt="" />
<span class="inset button-primary"><?php echo $row['naam']; ?></span></a></div>
</div>
<?
}
?>Hopelijk kan iemand mij hiermee helpen. Alvast bedankt
Ik heb dit geprobeerd alleen het laat me data niet meer uit me csv bestand, ik loop vast op het importeren van de data per kolom. Ik had een CSV importer gemaakt voor 1 kolom bijvoorbeeld:
DB
naam- achternaam - leeftijd - email
CSV
kolom
rij 1: marijn,boss,20,[email protected]
rij 2:
Maar ik moet nu zo maken dat alles in een eigen kolom geimporteerd kan worden. Hopelijk is mijn vraag nu duidelijker.
Edit een printscreen van me CSV misschien dat het helpt:
Iemand misschien enig idee wat ik verkeerd doe in het script hier boven? (het probleem is dat er geen data uitgelezen wordt in mijn 2e versie).
Alle tips zijn welkom. In ieder geval alvast bedankt.
Mvg
Marijn
<?php
#gemaakt door marijn Bos//
?>
<?php
function import()
{
global $g_type;
?>
<div id="paneel">
<?php
//connect to the database
include"include/connect_voorkant.php";
// ?>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
Upload uw bestand: <br />
<input name="csv" type="file" id="csv" />
<input type="submit" name="Submit" value="Submit" />
</form>
<?
if ($_FILES[csv][size] > 0) {
$csv_file = $_FILES[csv][tmp_name];
$csvfile = fopen($csv_file, 'r');
$theData = fgets($csvfile);
$i = 0;
while ($thedata = fgetcsv($csvfile,10000));
$csv_array = explode(",", $csv_data[$i]);
$insert_csv = array();
$insert_csv['artikelcode_leverancier'] = $csv_array[0];
$insert_csv['afnamegroep'] = $csv_array[1];
$insert_csv['leveranciersomschrijving'] = $csv_array[2];
$insert_csv['ingangsdatum'] = $csv_array[3];
$insert_csv['deeplink_productinfo'] = $csv_array[4];
$insert_csv['aantal_prijseenheden_per_prijs'] = $csv_array[5];
$insert_csv['bruto_prijs'] = $csv_array[6];
$query = "INSERT INTO materiaal(artikelcode_leverancier, afnamegroep, leveranciersomschrijving, ingangsdatum, deeplink_productinfo, aantal_prijseenheden_per_prijs, bruto_prijs)
VALUES('".$insert_csv['artikelcode_leverancier']."','".$insert_csv['afnamegroep']."','".$insert_csv['leveranciersomschrijving']."','".$insert_csv['ingangsdatum']."','".$insert_csv['deeplink_productinfo']."','".$insert_csv['aantal_prijseenheden_per_prijs']."','".$insert_csv['bruto_prijs']."')";
$n=mysql_query($query);
$i++;
}
if (mysql_query($query))
{
echo "Data is upgeload";
}
else
{
echo "Error Uploaden is niet gelukt!: " . mysql_error();
}
fclose($csvfile);
}
?>Beste ICT scripters,
Ik ben Marijn Boss 20 jaar oud en ben grafische vormgever, nu moet ik voor mijn stage bedrijf een csv importer bouwen, en dat is gelukt alleen nu is de vraag of ik hem zo kan maken dat hij per kolom een waarde invoegt. Bijvoorbeeld kolom 1= artikelcode_leverancier, Ik heb echt van alles geprobeerd maar ik kom er niet uit ik hoop dat iemand mij kan helpen? alvast bedankt!
<?php
#gemaakt door marijn Bos//
?>
<?php
function import()
{
global $g_type;
?>
<div id="paneel">
<?php
//connect to the database
include"include/connect_voorkant.php";
//
if ($_FILES[csv][size] > 0) {
//get the csv file
$file = $_FILES[csv][tmp_name];
$handle = fopen($file,"r");
//loop through the csv file and insert into database
do {
if ($data[0]) {
$sql=("INSERT INTO materiaal (artikelcode_leverancier, afnamegroep, leveranciersomschrijving, ingangsdatum, deeplink_productinfo, aantal_prijseenheden_per_prijs, bruto_prijs) VALUES
(
'".addslashes($data[0])."',
'".addslashes($data[1])."',
'".addslashes($data[2])."',
'".addslashes($data[3])."',
'".addslashes($data[4])."',
'".addslashes($data[5])."'
'".addslashes($data[6])."'
)
");
mysql_query($sql);
}
} while ($data = fgetcsv($handle,10000,",","'"));
if (mysql_query($sql))
{
echo "Data is upgeload";
}
else
{
echo "Error Uploaden is niet gelukt!: " . mysql_error();
}
//
//redirect
?>
<a href="http://www.q-bouwbestek.nl/admin/admin.php?actie=import">Ga terug</a>
<?
}
?>
<?php if (!empty($_GET[success])) { echo "<b>Uw bestand is upgeload.</b><br><br>"; } //generic success notice ?>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
Upload uw bestand: <br />
<input name="csv" type="file" id="csv" />
<input type="submit" name="Submit" value="Submit" />
</form>
<?
}
?>Beste cp leden,
Onlangs heb ik een psd ontwerp gemaakt voor mijn nieuwe website ( ben dj), en heb via internet tutorials geprobeerd dit om te zetten naar een joomla template. Dit is helaas niet helemaal gelukt joomla geeft als fout aan dat hij het bestand templateDetails.xml niet kan vinden. Terwijl dat wel in de zip zit ook ben ik bang ik nog wat fouten in mijn CSS en PHP bestanden heb zitten.
Nu ben ik opzoek naar iemand die mij vrijwillig een x met dit project wil helpen, ja ik besef dat vrijwillig niet echt uitnodigend is en dat de meeste designers en developers wel wat beters te doen hebben maar mocht er toch iemand zijn die mij hier mee wil helpen, laat dan een bericht je achter of voeg me toe op Knip
Met vriendelijke groet
Marijn Boss
Beste Cp Leden ik ben de heer Nillas in zee gegaan dus dit topic kan gesloten worden. Bedankt in iedergeval
Beste cp leden,
Ik zal me eigen even voorstellen.
Mijn naam is Marijn Boss een 19 jarige event ondernemmer. Ik ben 2 jaar geleden begonnen met het ograniseren van events voor jeugd. Na een aantal leuke feesten te hebben gehad ben ik bezig met het verbeteren van mijn bedrijf. Daar kan uiteraard een verzorgde degelijke website niet aan ontbreken.
Ik ben dus opzoek naar een website die beschikt over een mooi design en tergelijkertijd een functioneel cms.
Als voorbeeld heb hier de site staan van riverdance festival.
http://www.riverdancefestival.nl/
Ik zoek geen kopie maar de opzet vindt ik wel mooi, daar komt bij dat de pagina's die hun gebruiken ik wel wil. dus home, informatie enzv.
Verder zou ik graag in me header een jquery als deze willen hebben.
Waar appart de feesten worden weergegeven.
Onze feesten heten:
- Dirty Vibes
- Elevated Sessions
- First Class
- Limited Statements
- Friends United
Mocht je interesse hebben? voeg me dan toe op ********* en vertel je je vraag prijs en wanneer je dit kan opleveren.
Met vriendelijke groet Marijn Boss
EDIT R.JIPPING: geen e-mail adressen vrijgeven op het forum, contact kan via pb.
Beste cp leden, Ik ben sinds kort bezig met jquery's en heb er weinig verstand van, nu ik heb een foto gallerij die met een jquery werkt. Nu is mijn vraag of iemand mij kan vertelen of laten zien hoe ik een jquery die niet in de pagina zelf staat kan koppelen / aanroepen voor de div waar de photogallerij in staat. Bijvoorbaad bedankt voor jullie hulp.
mijn code staat hieronder:
Html Code
<div id="msg_slideshow" class="msg_slideshow">
<div id="msg_wrapper" class="msg_wrapper">
<div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
<div class="msg_thumb_wrapper">
<a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg"/></a>
<a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg"/></a>
<a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg"/></a>
<a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg"/></a>
<a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg"/></a>
<a href="#"><img src="images/thumbs/6.jpg" alt="images/6.jpg"/></a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#"><img src="images/thumbs/7.jpg" alt="images/7.jpg"/></a>
<a href="#"><img src="images/thumbs/8.jpg" alt="images/8.jpg"/></a>
<a href="#"><img src="images/thumbs/9.jpg" alt="images/9.jpg"/></a>
<a href="#"><img src="images/thumbs/10.jpg" alt="images/10.jpg"/></a>
<a href="#"><img src="images/thumbs/11.jpg" alt="images/11.jpg"/></a>
<a href="#"><img src="images/thumbs/12.jpg" alt="images/12.jpg"/></a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
</div>
</div>
</div>Jquery code
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* interval : time between the display of images
* playtime : the timeout for the setInterval function
* current : number to control the current image
* current_thumb : the index of the current thumbs wrapper
* nmb_thumb_wrappers : total number of thumbs wrappers
* nmb_images_wrapper : the number of images inside of each wrapper
*/
var interval = 4000;
var playtime;
var current = 0;
var current_thumb = 0;
var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper = 6;
/**
* start the slideshow
*/
play();
/**
* show the controls when
* mouseover the main container
*/
slideshowMouseEvent();
function slideshowMouseEvent(){
$('#msg_slideshow').unbind('mouseenter')
.bind('mouseenter',showControls)
.andSelf()
.unbind('mouseleave')
.bind('mouseleave',hideControls);
}
/**
* clicking the grid icon,
* shows the thumbs view, pauses the slideshow, and hides the controls
*/
$('#msg_grid').bind('click',function(e){
hideControls();
$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
pause();
$('#msg_thumbs').stop().animate({'top':'0px'},500);
e.preventDefault();
});
/**
* closing the thumbs view,
* shows the controls
*/
$('#msg_thumb_close').bind('click',function(e){
showControls();
slideshowMouseEvent();
$('#msg_thumbs').stop().animate({'top':'-230px'},500);
e.preventDefault();
});
/**
* pause or play icons
*/
$('#msg_pause_play').bind('click',function(e){
var $this = $(this);
if($this.hasClass('msg_play'))
play();
else
pause();
e.preventDefault();
});
/**
* click controls next or prev,
* pauses the slideshow,
* and displays the next or prevoius image
*/
$('#msg_next').bind('click',function(e){
pause();
next();
e.preventDefault();
});
$('#msg_prev').bind('click',function(e){
pause();
prev();
e.preventDefault();
});
/**
* show and hide controls functions
*/
function showControls(){
$('#msg_controls').stop().animate({'right':'15px'},500);
}
function hideControls(){
$('#msg_controls').stop().animate({'right':'-110px'},500);
}
/**
* start the slideshow
*/
function play(){
next();
$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
playtime = setInterval(next,interval)
}
/**
* stops the slideshow
*/
function pause(){
$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
clearTimeout(playtime);
}
/**
* show the next image
*/
function next(){
++current;
showImage('r');
}
/**
* shows the previous image
*/
function prev(){
--current;
showImage('l');
}
/**
* shows an image
* dir : right or left
*/
function showImage(dir){
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
alternateThumbs();
/**
* the thumb that will be displayed in full mode
*/
var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
.find('img');
if($thumb.length){
var source = $thumb.attr('alt');
var $currentImage = $('#msg_wrapper').find('img');
if($currentImage.length){
$currentImage.fadeOut(function(){
$(this).remove();
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
});
}
else{
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
}
}
else{ //this is actually not necessary since we have a circular slideshow
if(dir == 'r')
--current;
else if(dir == 'l')
++current;
alternateThumbs();
return;
}
}
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
function alternateThumbs(){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.hide();
current_thumb = Math.ceil(current/nmb_images_wrapper);
/**
* if we reach the end, start from the beggining
*/
if(current_thumb > nmb_thumb_wrappers){
current_thumb = 1;
current = 1;
}
/**
* if we are at the beggining, go to the end
*/
else if(current_thumb == 0){
current_thumb = nmb_thumb_wrappers;
current = current_thumb*nmb_images_wrapper;
}
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.show();
}
/**
* click next or previous on the thumbs wrapper
*/
$('#msg_thumb_next').bind('click',function(e){
next_thumb();
e.preventDefault();
});
$('#msg_thumb_prev').bind('click',function(e){
prev_thumb();
e.preventDefault();
});
function next_thumb(){
var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
if($next_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
++current_thumb;
$next_wrapper.fadeIn();
});
}
}
function prev_thumb(){
var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
if($prev_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
--current_thumb;
$prev_wrapper.fadeIn();
});
}
}
/**
* clicking on a thumb, displays the image (alt attribute of the thumb)
*/
$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
var $this = $(this);
$('#msg_thumb_close').trigger('click');
var idx = $this.index();
var p_idx = $this.parent().index();
current = parseInt(p_idx*nmb_images_wrapper + idx + 1);
showImage();
e.preventDefault();
}).bind('mouseenter',function(){
var $this = $(this);
$this.stop().animate({'opacity':1});
}).bind('mouseleave',function(){
var $this = $(this);
$this.stop().animate({'opacity':0.5});
});
/**
* resize the image to fit in the container (400 x 400)
*/
function resize($image){
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
var containerwidth = 400;
var containerheight = 400;
if(imgwidth > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.css({
'width' :theImage.width,
'height':theImage.height
});
}
});
</script>slotje word al geholpen. bedankt overigens voor u reactie alexruter