Why my images do not appears in a modal? Codeigniter - php

I am using codeigniter to develop a web system and I have to add a carousel slide on a modal, but the images does not appears when I'm using a foreach to select an image one by one
I'm running this web system with codeigniter 3.2 and php 7. I'm using a theme from themeforest called 'Pages ADM' which uses owl-carousel plugin.
<div class="container">
<div class="owl-carousel owl-theme">
<?php foreach ($produto['midias'] AS $midia) :?>
<img src="<?=base_url('uploads/midias/').$midia;?>"/>
<?php endforeach; ?>
</div>
</div>
and in my controller
$data['produto'] = $produto;
$data['produto']['midias'] = $this->produto_midia_class->listar('*');
where the function 'listar' was defined in my model
When Im using local images they appears, but when I'm using foreach, these images do not appear.

It would be easier to concatenate the string afterwards. Within "" the variables will be output.
<img src="<?php echo base_url()."uploads/midias/$midia";?>">
You could also do something like this:
<div class="container">
<div class="owl-carousel owl-theme">
<?php
foreach ($produto['midias'] as $midia){
$baseurl = base_url();
echo "<img src='$baseurl"."uploads/midias/$midia'>";
}
?>
</div>
</div>
Also just to note that usually the $midia will need an identifier like the column name if pulled from a database such as
<div class="container">
<div class="owl-carousel owl-theme">
<?php
foreach ($produto['midias'] as $midia){
$baseurl = base_url();
$imageurl = $midia->url;
echo "<img src='$baseurl"."uploads/midias/$imageurl'>";
}
?>
</div>
</div>
Hope this helps.

Related

How to change link for each item in foreach loop in PHP?

Totally no experience with PHP and I need to change some little thing by my self, the developer has made a generic html component with a generic link ("href=#"). This should be different for each item in foreach loop. Pretty simple but totally difficult who doesnt know the syntax.
Anyone a quick fix?
<?php foreach ($pricing['price_box'] as $box) :?>
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="p-4 pl-5 pr-5 pb-5">
<h3 class="text-center pt-4 pb-5"><?php echo $box['title'] ?></h3>
<div class="d-md-flex justify-content-md-between mb-5">
<?php echo $box['detail'] ?>
<div class="price-unit align-self-center">
<?php
$priceArray = explode('.', $box['price']);
echo $box['price'] ? $priceArray[0] . ",<span>$priceArray[1]</span>" : ''
?>
<div><?php echo $box['duration'] ?></div>
</div>
</div>
<div class="text-center">
Registreren
</div>
</div>
</div>
<?php endforeach; ?>
Since the anchor tag is inside the foreach loop, you can use the $box variable in the anchor tag.
Also, you can use the php variable inside the html by echo it.
For example, if your link is something like some_php_script.php?id=XXX and you want to replace the xxx with a unique id, you can use it like:
Registreren
assumes that the $box array contains an index called id.
Read more about php echo function.
Read more about php arrays here.
Assuming you need to change the link here :
<div class="text-center">
Registreren
</div>
As it is already in the loop, and you have $box array, you need to find out on which index the link href and text(the one you need to display instead of Registreren ) is available. Suppose you have the link at index link and text is at text, then your code will be like
<div class="text-center">
<?php echo $box['text'];?>
</div>
You can check the array structure using print_r()
Reference
Arrays
foreach

how do i make an image to zoom in bootstrap in codeigniter view when click on image?

<h5>
<a href="<?php echo base_url(); ?>/vendor/home/projects" >Back to Projects</a>
<h5>
<div>
<div class="container">
<div class="row">
<?php
foreach ($projects as $value) {
?>
<?php
$project_images = json_decode($value['project_gallery'],true);
$i=0;
foreach ($project_images as $project_image_value) {
$i++;
?>
<div class="col-md-2">
<img src="<?= base_url() ?>assets/uploads/projects/<?=$project_image_value['fname']?>" onclick="openModal(<?= $i?>)" class="img-thumbnail img-responsive " />
<div><?=$project_image_value['title']?></div>
</div> <?php
}
?>
<?php
}
?>
</div>
</div>
this is my codeigniter view to display images. How can i Apply light box so that when you click image, only that image should be zoomed
There are so many easy to use JQuery plugins available for image zoom kind of functionality. Use any of the following:
There use is as simple as:
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});
Reference
Some more reference:
https://i-like-robots.github.io/EasyZoom/
http://www.jqueryscript.net/tags.php?/image%20zoom/
http://www.jqueryscript.net/demo/Simple-jQuery-Magnifying-Glass-Image-Zoom-Plugin-magnify-js/

How to manage page--front.tpl.php images from back-end/admin-panel in drupal 7

I am working on a website in drupal 7, I have created a Home page in page--front.tpl.php with Static Html like the code below,
<div class="col-sm-8 col-xs-24 botmboxes">
<div class="row">
<div class="boxbotmimg">
<img class="img-responsive" src="./sites/all/themes/korhanifashion/images/PlasticRug-Boat.png">
<span class="hovblck"></span>
</div>
<div class="botboxhov">
<a href="<?php print $front_page; ?>limited_offers">
<img class="bbres" src="./sites/all/themes/korhanifashion/images/limroffer.png"></a>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-24 botmboxes botboxthree">
<div class="row">
<div class="boxbotmimg">
<img class="img-responsive" src="./sites/all/themes/korhanifashion/images/AnchorLine_BLCR_HI.png">
<span class="hovblck"></span>
</div>
<div class="botboxhov">
<a href="https://www.facebook.com/KORHANIhome">
<img class="bbres" src="./sites/all/themes/korhanifashion/images/fusonfbok.png"></a>
</div>
</div>
</div>
I want to manage these Images from back-end i.e from Admin-panel. So that Admin can change the images from Admin-panel, And also how Admin can put links to that images from back-end.
How I can do that?
Thanks in Advance
I usually solve similar issues(customizing the dynamic home page contents) by creating a custom content type(https://www.drupal.org/node/306792).
And then you can hard-code to read nodes of a specific type in your template file or use Views (https://www.drupal.org/project/views).
Added sample code:
$query = new EntityFieldQuery();
$query->entityCondition('entity_type', 'node')
->entityCondition('bundle', 'home_image')
->entityCondition('status', 1);
$result = $query->execute();
if (isset($result['node'])) {
$nodes = node_load_multiple(array_keys($result['node']));
foreach ($nodes as $node) {
$img_url = file_create_url($node->field_image['und'][0]['uri']);
}
}
In the above code, 'home_image' is the name of content type you have created and 'field_image' is the name of image field. You can add and edit the name of image field when editing fields of content type. Please be sure to set the field type to 'Image'.

how to load view in codeigniter with variable?

hi i want to just load the view page using variable not by direct name
here is my code:-
function load_views()
{
$this->load->model('test_model');
$data=$this->test_model->getMenu();
foreach($data as $data_menu) {
echo $data_menu->views;
$this->load->view($data_menu->views);
}
}
output :
test_view
An Error Was Encountered Unable to load the requested file: .php
actually it takes the value from db but it did not call the view file which is present in the view folder.
this is my view page :
<div class="panel-heading">
<h3 class="panel-title">Dashboard</h3>
</div>
<br/>
<div class="row">
<?php
$count = 0;
foreach($m as $data_menu){
if(($count% 4== 0))
{
?>
<div class = "row"></div>
<?php
}
?>
<div class="col-md-3">
<!--<a href="<?/*php echo base_url()*/?>index.php/<?php/* echo $data_menu->views*/?>">-->
<a href="<?php echo base_url()?>index.php/dn_login_controller/load_views">
<img class="img-rounded" src="" height="80" width="80" />
<div class="caption">
<h3><?php echo $data_menu->function_name; ?></h3>
</div>
</a>
</div>
<?php
$count++;
}
?>
</div>
</div>
Now in the view i want load views dynamically but i cant...
please help me.....
If you var_dump($data) you will see that it has an empty value somewhere in the array.
As kumar_v said in a comment, try to check for empty values
foreach($data as $data_menu) {
if(!empty(trim($data_menu->views)))
$this->load->view($data_menu->views);
}
This issue might be because, you cannot just directly load multiple views from single function/controller, when you just load view CI will send it to browser.
There are two other workaround for this :
Pass 2nd parameter NULL & 3rd parameter TRUE while loading your menu views, which will create your html as data instead of sending it to browser. Refer this link : codeigniter: loading multiple views
Create a view file, pass your data to that view & on that view execute for loop & load all your views.

How to place Bootstrap Carousel image captions outside the carousel div?

apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/

Categories